CSS Position Tag Crashes IE on Print / Print Preview

[ehonauer]

If I go to Print or Print Preview in IE on a page that has more than one printable page, IE crashes. FF / NN don't crash, but they only show one printable page. I've narrowed the issue down to a position tag:

#pagecell1{
position:absolute; /*this is the line that causes a print error in IE */
top: 150px;
left: 2%;
right: 2%;
width: auto;
background-color: #ffffff;
}

If I remove the position:absolute tag, the problem goes away (of course this destroys my layout).

I googled the web and this board but didn't find anything that sounded anything like this.

Here's the offending page: [oops]

Any advice or direction would be great!

[edited by: SuzyUK at 9:02 am (utc) on Mar. 1, 2006]
[edit reason] no urls thanks, see TOS linked at bottom of page [/edit]

[Robin_reala]

Welcome to WebmasterWorld!

1st off, personal URLs are not allowed as per the TOS.

Getting down to the actual problem - will it destroy your layout if you just remove it for printing? If not then you could set a print-only media rule to remove it. For example:

@media print {
 #pagecell1 { position: static; }
}

[ehonauer]

Ouch, sorry about that URL! To add a little context, this is a menu page for a restaurant so I'm anticipating people will be printing it out pretty frequently.

Thanks for the tip on the print media type, Robin, I'll try that out. I have two concerns, though:

1) From a philosophical perspective, when users hit "Print" they should get a print out of what's on their screen (except when they explicitly click a "Printer Friendly Version" link and a reformatting of the page is then expected). But between doing the right thing and getting it done I'm leaning towards the latter in this situation...

2) If compliance with the print media type is shaky in older versions of IE, users will still experience the crash when they hit Print.

I'm also curious about the crash behavior, which appears to be an unreported IE bug. Should I post my HTML so others can verify it, or submit it somewhere for addition to a CSS bug list?

[Robin_reala]

@media support is pretty good in IE as far as I can tell.

Regarding submitting it as a bug - if you can make a reduced testcase containing the minimum code needed to make this happen and still can't findthe issue then by all means go ahead.

[Hester]

Three things:

1) Make a print-only stylesheet but add it in the same way you add a normal stylesheet, using a link in the head.

2) Have you tried adding a height to the #pagecell1 block? Sometimes IE likes to know the height of an element.

3) You have left and also right specified, but only one can be applied to an element. Maybe this is getting IE confused? If you are trying to center the element, then you need to style the margins instead. (I think "margin:0 auto;" might do it.)

[Robin_reala]

Hester - I can't find anything in the specs [w3.org] that says that left and right can't both be applied to an element?

[DrDoc]

In fact, you are supposed to be able to specify both left and right, thus getting the browser to figure out the width.

IE doesn't support that, however, although it works in Firefox and Opera.

[doodlebee]

Maybe coming in late on this, but yes - definitely create a print stylesheet - keep the print seperate from your display media.

Older versions of IE use media="print" just fine.

As for your div that's screwing up - instead of using "position:absolute, left:2%, right2%;" have you tried this:

width:auto;
margin: 0 15%;

This will cause the browser's print screen to automatically determine the width of the content that's to be printed, and then gives it a 15% margin (or whatever you want - you can set it lower if you want to) on the left and right. No worries about absolute positioning or anything else.