views:

1249

answers:

2

I'm debugging a site that has problems with element positioning when printing (I have a separate print.css file linked by a link element with the media="print" attribute). This problem only occurs in IE7 and IE8.

What I'm looking for is a way to view the page using the print media type, but while still having IE8's developer tools available to view element details and edit in real-time, etc.

The function I'm looking for would be similar to the "Display CSS by Media Type" feature in Chris Pederick's Web Developer Extension for Firefox. (But this problem doesn't occur in firefox...nor in safari, or even in IE6.)

+2  A: 

Why not just assign the screen attribute to the print stylesheet for your debugging session (and remove the screen version or swap the media attributes)?

tom
Unfortunately, while this does apply the positioning, there's a difference between these elements as seen in the browser and as seen in print preview. So while this probably has the same effect as the web developer toolbar, I still have to figure this specific bug out. Thanks for the information!
This is not an ideal solution because as RVanasse told, it's not the same in the Print Preview. I also have the same problem. Works with FF and Chrome but IE have weird display BUT when use the .css of the print to the screen, all fine...
Daok
+1  A: 

What I have always done, is I have disabled (commented out the "screen" style sheet) and converted the media="print" style sheet to be media="screen". Only way I know how with out printing a bunch of test pages.

andrewWinn