Here are 3 CSS hacks I use on a weekly basis. They have been greatly covered before but I think it’s important to agglomerate them into one post as they are, to me, the major cross browser fixes I need regularly. It’s a good idea to keep these in your Coda Clips.
Cross-browser min/max height/width
This 3-line hack makes it easy to implement min-height, max-height, min-width and max-width across all browsers (dirty look at IE6).
.class {
min-height: 200px;
height: auto !important;
height: 200px;
}
It’s pretty straight forward. Modern browsers will understand the min-height property and the !important designation. So when the block contains content that is shorter than 100px, min-height will be observed while content taller than 100px will be adjusted properly.
IE6 only understands one line in this whole class, the last one. But that’s ok because it interprets height just like modern browsers interpret min-height, adjusting the height for taller content but not making the box any shorter than specified.. So we’re good. Because height: auto has the important designation, newer browsers will simply ignore the last line.
Of course you can apply this hack with max or min and width or height.
Cross-browser float clearing
If there’s one thing I hate when coding XHTML pages it’s having to drop in <div class=”clear”></div> any time I want to clear a float. It’s ugly, cumbersome and to me, goes against the principle that your XHTML code should not have have presentational markup.
Well lucky for me (and you), there are several ways you can clear floats with CSS. Position Is Everything talks about this long method which I personally find to be a bit confusing and apparently it doesn’t work with IE7. Instead, you can use this very simple alternative which takes up only 2 lines of your stylesheet.
.clear {
overflow: hidden;
width:100%;
}
This works because by setting overflow establishes new block formatting contexts. For IE, by giving hasLayout to the element, it will clear. This why we give it width but height and zoom will work as well. Just make sure that if you use zoom that you are setting in a different stylesheet with conditional comments to keep your CSS valid.
Cross-browser PNG transparency (almost)
Again I can’t help but give that dirty look to IE6 because it is the only browser that this concerns. Fortunately though versions of IE7 and up and all the good browsers now support it, but that’s no news. There is hope for the annoying older brother. It has a special filter built in that will allow transparency but it’s use is quite limited. As long as you don’t need to use background-position or repeat it does work pretty good, in fact I use it on this site for pretty much every image except the wood background. For example, the white background on this post is a 1px high transparent PNG which is repeated on modern browsers but “streched” with IE6. So in a way, it simulates a repeated image. Here’s the code:
.background {
background:transparent url(img/left-col-bg.png) repeat-y scroll left top;
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’img/left-col-bg.png’);
}
Using the undersore hack, we can target IE6 and previous versions only in lines 2 and 3. Notice the sizingMethod=scale which is what streches the image like I talked about. For elements such as menu buttons (like the ones on this blog) use sizingMethod=crop.
