The ie6 conditional.
It is pretty late so my first tip is going to be a short one. The more you start using CSS the sooner you’re going to discover the internet explorer 6 sucks. Before ie7 you could write little hacks write into your CSS without using a second stylesheet because safari and firefox wouldn’t look at your CSS that begins with #. Since ie6 doesn’t recognize the min-height attribute in CSS but uses height in the same manner the other browsers use min-height, you could follow your min-height attribute with #height.
#myDiv {
min-height: 500px;
#height: 500px !important;
}
Internet Explorer 7 also reads those # attributes though. Though height may not be that big of a deal, certain things are. Take this website for instance. If you’re in Safari, Firefox, or IE7 you’ll see a nice .PNG version of the navigation at the top. This makes the background a little more seamless because PNGs support alpha transparencies. However, IE6 doesn’t support the transparency in the PNG, you’d see an ugly grey box where the shadow is. So if you’re in IE6, you see a JPG version of the navigation background. It isn’t as pretty as the PNG in the other browsers, but isn’t as ugly as a PNG in IE6.
To use a conditional you have your normal stylesheet, then you have another style sheet with the IE6 specific attributes in. First you link your normal stylesheet, then you follow it up with the conditional statement. Mine looks like this:
<!--[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”styles/ie6_style.css” />
<![endif] –>
The conditional is basically telling your browser that if the browser is less than IE7 (so IE6 and below) pull some styles out of the listed style sheet. Then in that style sheet I’m using the !important declaration on all of my lines. You can take a peek at my stylesheets if you want. Here is my default stylesheet and here is my ie6 stylesheet. There is a chance that there is a better way, like the # signs in the conditional stylesheet probably isn’t necessary. But, this is how I do them.
Looking at my post I see my code isn’t coming through very clearly - so definitely look at my style sheet and view the source of one of my pages - probably a non-blog page, like my home page, would be easiest.
Tags: conditional statement, CSS, ie6
This entry was posted on Sunday, May 4th, 2008 at 8:58 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.