Printing background images

This is a nice little hack to print background images which are not printed by default by browsers. Normally you’d use the image tag but this little fix uses list-style-image instead.

So, lets say you’ve got an identifier setup called logo, in the print CSS you need to do this

#lo\go {
display: list-item;
list-style-image: url(logo.gif);
list-style-position: inside;
height: 39px;
width: 125px;
}

It apparently works in IE6, Firefox 1.0 and 1.5, Opera 8.5 and Safari. Pretty neat huh? A full explanation can be found here.

Min-height hack

I’ve just learnt a good hack for min-height. As you’ll know min-height is one of the few things that IE gets right and Firefox doesn’t. So, this little trick below sorts it out. If you want a box to have the minimum height of 200 pixels but to expand when more text is entered, then give tihs this a try:

min-height: 200px;
height: auto !important;
height: 200px;

IE6 table hack

So I’m using a table to display data from a database. In Firefox it’s the right width but in IE6 it goes off to the right. Another IE6 bug coz it can’t handle tables with a width of 100% in a layer without a set width. Apparently what it does is use the width of the window – nice, I guess Microsoft must be a bit short on cash to be able to invest in building a browser that’s standards compliant!! Anyways, I got round it by slapping the table into it’s own layer with a width set to 100% and that did the trick.