One of my CSS rules is crashing IE 6 (Windows XP, SP2) whenever anyone tries to print the page it is part of.
The rule is:
#footer {
margin-top: -4px;
border-top: 4px solid #232323;
}
And it's applied to an image at the bottom of the page, but it'll crash if applied to a div containing the image, or even a <p> tag - but only at or near the bottom of the page.
Changing the margin-top to a positive value or zero fixes the problem, but even a single pixel negative causes the crash. Just go to File->Print, and click "OK" and poof. The error appears to link the problem to mshtml.dll, but research didn't shed much more light on how this would connect to a negative margin.
Any idea why this is happening?
Here's the offending page:
<!-- m --><a class="postlink" href="http://www.burtonmusiccamp.com/test.html">http://www.burtonmusiccamp.com/test.html</a><!-- m -->
- BobThe negative margin is used to hide a fault in the layout. The following is better and avoids the negative margin.
Remove this and it's style rule:<img src=http://www.webdeveloper.com/forum/archive/index.php/"footer_register.jpg" width="760" height="24" border="0" alt="Page footer" id="footer" />
Change:#copyright {
color: #eeeeee;
font-size: 10px;
text-align:center;
line-height:24px;
border-top: 4px solid #232323;
width:760px;
height:24px;
background:#464C7E url(footer_register.jpg);
}
<p class="mt_8" style="margin-bottom:10px;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript
penNewWindow('register_print.php','width=750,height=450,menubar=yes,scrollbars=yes,resiz able=yes')"><b>Printer-friendly page</b></a></p>Nice! That did the trick, and less hacky. Thanks very much.
Unfortunately it doesn't solve my once-in-a-lifetime problem, which is what happens when the page content is too short and the footer crashes into the nav at the left.
The purpose for the negative top margin was to merge the border atop the footer with the border at the bottom of the lowest left-hand nav button, in those rare instances when the page content was so short that these two would meet. I'm not even sure there is a page like that on the site now - you know clients and their content - but I sort of wish I had it covered, just in case.
Any tips?
BTW - wasn't quite sure why you added the margin-bottom to the newWindow <p> tag (your second recommendation). Actually, since removing that negative 4 pixel margin on the footer, I needed to DECREASE the space below that newWindow link - which I did by reducing the bottom padding of the div it's inside. So all is well on that front.
Thanks again,
BobUse min-height for the page content, make it the same as the height of the menu.
That works for FF, but for IE you will need to set the height:min-height:???px;
height:auto !important; height:???px;
As for the margin-bottom, I thought you wanted the text vertically centered, so change as required.
Using the @media print (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/media.html">http://www.w3.org/TR/REC-CSS2/media.html</a><!-- m -->) rule is probably a better option than those pop-ups for printing.Use min-height for the page content, make it the same as the height of the menu.
That works for FF, but for IE you will need to set the height:min-height:???px;
height:auto !important; height:???px;
That would keep the footer from contacting the bottom of the nav - but the nice thing about the negative margin is, when they DO contact, the borders merge into one and it looks great. But again, the client has stuffed enough content into everything that it probably isn't an issue anyway.
Using the @media print (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/media.html">http://www.w3.org/TR/REC-CSS2/media.html</a><!-- m -->) rule is probably a better option than those pop-ups for printing.
I'm intrigued - how cross-browser is @media?
In this case, there's a significant layout difference (no navigation, no big header, different smaller header, wider content area, no footer) so it might be pretty complicated to devise. Presently I'm simply loading a different PHP page, which retrieves the same content into a different template. But if @media is how people do it, then I probably should learn.
- BobAdd this to the end of the css rule list, then look at the browser print preview
media print {
html, body {background:#fff;border:0;}
img, #navcontainer, #right_widectr {display:none;}
#wide_center {
font-size:13pt;
}
It could be a lot better, but you page was not designed for printing.Add this to the end of the css rule list, then look at the browser print preview:...
Hey - that's cool. I see that I could tweak quite a few rules to make the print version more successful. Then, as you suggest, I can lose the 'printer friendly' bit and just tell users to print the page.
It could be a lot better, but you page was not designed for printing.Are you referring to the fact that it's inside a 3-column table, or is there something else fundamental I could/should change?
- BobIt is the table that's a bit of a problem. The @media needs to reference the columns (td) directly by giving them id's. Then collapse the menu columns and let the content column expand. Alternatively redesign with css in mind and only semantic tables.Yeah - I hate that I had to do a table in there. This was supposed to be my first "all-CSS" site. So far I'm finding doing the 3-column-with-footer business a bit tricky. The table was a no-brainer as far as getting all the columns to be the same length - though I still ended up with a background image, so maybe I take another look at some of the 3-col footered tutorials out there - like this one:
<!-- m --><a class="postlink" href="http://accessat.c-net.us/test/template-3col.html">http://accessat.c-net.us/test/template-3col.html</a><!-- m -->
I just hate dealing with floats - they never seem to do what I want without a lot of fuss, and remain screwy in Mac IE 5 even WITH the fuss.
- Bob
The rule is:
#footer {
margin-top: -4px;
border-top: 4px solid #232323;
}
And it's applied to an image at the bottom of the page, but it'll crash if applied to a div containing the image, or even a <p> tag - but only at or near the bottom of the page.
Changing the margin-top to a positive value or zero fixes the problem, but even a single pixel negative causes the crash. Just go to File->Print, and click "OK" and poof. The error appears to link the problem to mshtml.dll, but research didn't shed much more light on how this would connect to a negative margin.
Any idea why this is happening?
Here's the offending page:
<!-- m --><a class="postlink" href="http://www.burtonmusiccamp.com/test.html">http://www.burtonmusiccamp.com/test.html</a><!-- m -->
- BobThe negative margin is used to hide a fault in the layout. The following is better and avoids the negative margin.
Remove this and it's style rule:<img src=http://www.webdeveloper.com/forum/archive/index.php/"footer_register.jpg" width="760" height="24" border="0" alt="Page footer" id="footer" />
Change:#copyright {
color: #eeeeee;
font-size: 10px;
text-align:center;
line-height:24px;
border-top: 4px solid #232323;
width:760px;
height:24px;
background:#464C7E url(footer_register.jpg);
}
<p class="mt_8" style="margin-bottom:10px;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"javascript
penNewWindow('register_print.php','width=750,height=450,menubar=yes,scrollbars=yes,resiz able=yes')"><b>Printer-friendly page</b></a></p>Nice! That did the trick, and less hacky. Thanks very much.Unfortunately it doesn't solve my once-in-a-lifetime problem, which is what happens when the page content is too short and the footer crashes into the nav at the left.
The purpose for the negative top margin was to merge the border atop the footer with the border at the bottom of the lowest left-hand nav button, in those rare instances when the page content was so short that these two would meet. I'm not even sure there is a page like that on the site now - you know clients and their content - but I sort of wish I had it covered, just in case.
Any tips?
BTW - wasn't quite sure why you added the margin-bottom to the newWindow <p> tag (your second recommendation). Actually, since removing that negative 4 pixel margin on the footer, I needed to DECREASE the space below that newWindow link - which I did by reducing the bottom padding of the div it's inside. So all is well on that front.
Thanks again,
BobUse min-height for the page content, make it the same as the height of the menu.
That works for FF, but for IE you will need to set the height:min-height:???px;
height:auto !important; height:???px;
As for the margin-bottom, I thought you wanted the text vertically centered, so change as required.
Using the @media print (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/media.html">http://www.w3.org/TR/REC-CSS2/media.html</a><!-- m -->) rule is probably a better option than those pop-ups for printing.Use min-height for the page content, make it the same as the height of the menu.
That works for FF, but for IE you will need to set the height:min-height:???px;
height:auto !important; height:???px;
That would keep the footer from contacting the bottom of the nav - but the nice thing about the negative margin is, when they DO contact, the borders merge into one and it looks great. But again, the client has stuffed enough content into everything that it probably isn't an issue anyway.
Using the @media print (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/media.html">http://www.w3.org/TR/REC-CSS2/media.html</a><!-- m -->) rule is probably a better option than those pop-ups for printing.
I'm intrigued - how cross-browser is @media?
In this case, there's a significant layout difference (no navigation, no big header, different smaller header, wider content area, no footer) so it might be pretty complicated to devise. Presently I'm simply loading a different PHP page, which retrieves the same content into a different template. But if @media is how people do it, then I probably should learn.
- BobAdd this to the end of the css rule list, then look at the browser print preview
media print {html, body {background:#fff;border:0;}
img, #navcontainer, #right_widectr {display:none;}
#wide_center {
font-size:13pt;
}
It could be a lot better, but you page was not designed for printing.Add this to the end of the css rule list, then look at the browser print preview:...
Hey - that's cool. I see that I could tweak quite a few rules to make the print version more successful. Then, as you suggest, I can lose the 'printer friendly' bit and just tell users to print the page.
It could be a lot better, but you page was not designed for printing.Are you referring to the fact that it's inside a 3-column table, or is there something else fundamental I could/should change?
- BobIt is the table that's a bit of a problem. The @media needs to reference the columns (td) directly by giving them id's. Then collapse the menu columns and let the content column expand. Alternatively redesign with css in mind and only semantic tables.Yeah - I hate that I had to do a table in there. This was supposed to be my first "all-CSS" site. So far I'm finding doing the 3-column-with-footer business a bit tricky. The table was a no-brainer as far as getting all the columns to be the same length - though I still ended up with a background image, so maybe I take another look at some of the 3-col footered tutorials out there - like this one:
<!-- m --><a class="postlink" href="http://accessat.c-net.us/test/template-3col.html">http://accessat.c-net.us/test/template-3col.html</a><!-- m -->
I just hate dealing with floats - they never seem to do what I want without a lot of fuss, and remain screwy in Mac IE 5 even WITH the fuss.
- Bob