Clearing floats and printing with Firefox.
Half of my resume was missing. It was there on the screen, but in print preview and on the printed page reams of experience disappeared. Not ideal.
I discovered that when you use the formatting context to clear floats, firefox treats each printed page as a “box” with the overflow hidden. Elements with overflow: hidden applied will be printed partially or not at all.
.myElement{
overflow:hidden;
_overflow:visible;
zoom:1;
}
The solution I found was to remove the formatting context using an overload in the print style sheet. This meant I needed to simplify the design, but frankly, for print, simplification is appropriate. If it is important that your layout remain exactly the same on the printed page, test overflow:auto instead of hidden.
In print.css :
.myElement{
overflow:visible;
/* plus corrections to errors in layout this creates */
}
Perhaps a better float clearing technique is the one employed by YUI grids.css. I don’t think it would have the effect of avoiding wrap around floated elements, so you might be forced to float all your containers.
.myElement:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
To visualize the problem, open the old version of my resume and then do print preview.
The original technique :