New CSS Support in IE6

One of my recent projects has the luxury of only requiring support for IE6 (and Mozilla, natch). This is a rare occurrence, since most clients require support for least a version or two back (and justifiably so). However, in this case, a web application in another portion of the website (contracted to another vendor) already required IE6, so that support cascaded to the rest of the site.

Coding for such recent browsers is a bit surreal, in a way — all of a sudden, I can write standards compliant code and there’s a good chance it could work work without fiddling ;). Along those lines, I decided to check on new CSS support that may have been introduced into IE6. Generally, I wouldn’t give much thought to the workings of such a recent browser, but such knowledge could be useful to me this time.

So, after briefly searching Google, I found this MSDN Library article on CSS Enhancements in IE6. I was already aware of several of the features, such as IE6’s support for the CSS box model (in short, the CSS spec states that padding is added to an element’s width, and IE versions before 6 ignored this).

I was also pleased to see that IE6 includes some useful bits such as support for min-height (you can specify the minimum height on an element). Interestingly enough, the article didn’t mention min-width, which I would think they could have implemented at the same time (or, should have been). Perhaps most amusing to me, though, is that IE6 only now supports padding on images. How is it that image-padding slipped under their radar for so long?

PlainsCapital Relaunch

My most recent freelance work was as lead developer for PlainsCapital’s relaunch of its site and subsidiary sites (PlainsCapital Bank, PlainsCapital Insurance, and others). Formerly PNBFinancial, the company decided to redesign its sites as part of its company-wide rebranding.

The sites launched last week and its standards-compliant layout includes valid XHTML 1.1 and CSS (just CSS for layout). I’ve also added a section to my portfolio which explains several of the CSS techniques used throughout the site.

CSS Based Rollovers

JavaScript rollovers have been around almost as long as JavaScript itself (and they’re still useful, in many ways). However, I’ve recently discovered some CSS-based rollovers with a built-in preloader (via Zeldman.com).

The idea is that the documentation is in the source code, and that the reader figures things out from there. Really, the technique is not too hard to understand, once you see what he’s doing. Basically, each <img> is surrounded with an <a href=“…”> (just like normal). However, each link’s background-image is set to the desired rollover state.

Of course, with the image completely covering the background, the rollover state isn’t seen. But, the author then specified visibility:hidden for the hover-state of the images. So: the user rolls over an image, the image becomes hidden, and the background (the rollover state) is seen.

And, because the rollover-images aren’t hidden elements (but merely covered up), they’re loaded with the rest of the page — and so there’s no lag when they’re swapped-in (or, rather, unveiled). An elegant approach, I think.

CSS-discuss Mailing List

I was at first just going to mention this to Jason, but I figured that maybe some other people may be interested as well. Anyhow, I’ve recently discovered an excellent CSS mailing list — CSS-discuss. It’s administered in part by Eric Meyer, which gives a hint as to the caliber of the list.

I’ve only been subscribed for the past week or so, but I’ve found the list to be very helpful. And, even if I’m not asking the questions, I find that answering CSS questions of others allows also me to keep my skills sharp.