In most cases IE fixes can be easily separated from the main CSS file via conditional comments. However, if certain restrictions don’t allow for this you may need a way to isolate IE 6 and IE 7.
Most designers know that IE 6 doesn’t understand html>body and therefore ignores any CSS entitity directly after it. However, IE 7 recognizes the first-child selector so another step is needed to isolate IE 7.
For example, let’s say we have a div with an id of “content” that is rendered three different ways in IE 6, IE 7 and Firefox, respectively. You can use html>body to separate IE 6 from the group, but then you still need a way to separate IE 7 and Firefox.
I came to this junction and realized that I had never had this problem before. Thankfully, we have search engines. A quick Google search revealed a comment within a post about dropdown menus that had the answer.
Apparently, *:first-child+html is only readable by IE 7. Figure 1 has an example of how you would use this line of CSS to separate the styles for the different browsers.
- #content // This is normal CSS that every browser understands.
- {
- CSS PROPERTIES FOR ALL
- }
- html>body #content // Every browser except IE understands the first-child selector
- {
- CSS OVERRIDES FOR FIREFOX/SAFARI/ETC.
- }
- *:first-child+html #content // Only IE 7 reads this line and subsequent CSS properties
- {
- CSS OVERRIDES FOR IE 7
- }
To finish, let’s see it in a real example. The CSS that is in Figure 2 produces the box that is shown in Figure 3. It’s red in IE 6, green in IE 7 and blue in all other browsers.
- #blogpost-95-example { width:500px; height:300px; margin-right:18px; float:left; }
- #blogpost-95-example { background-color:#f00; }
- html>body #blogpost-95-example { background-color:#00f; }
- *:first-child+html #blogpost-95-example{ background-color:#0f0; }
- <div id="blogpost-95-example"> </div>
So there you have it, isolation within the style sheet.
This is a great tip! You actually do not need the `:first-child` part of the code. This is the code I use to target IE6 and IE7:
> #blogpost-95-example { … }
> * html #blogpost-95-example { … } > *+html #blogpost-95-example { … }
I like to use these two technique together (”Star HTML” for IE6 and “Star Plus HTML” for IE7) because they each require seven additional characters and line up with each other nicely.
I’m torn between using an approach like this and conditional comments. On the one hand, it’s nice that non-IE browsers never see or download the code if it’s in a conditional comment. On the other hand, the IE-specific styles are in a completely different file than the standard styles, making it hard to remember to adjust the IE-specific styles if the standard styles change. I know Microsoft recommends the conditional comments, but (at least today :~) I’m leaning towards keeping the IE-specific styles within my regular stylesheet.
I also meant to mention that you can target IE6 and IE7 with specific declarations within a rule using the “Underscore Hack” and the “Asterisk Hack”. Unfortunately, these don’t validate like the other techniques do, but they are very easy to use:
#blogpost-95-example { background: blue; _background: red; *background:green; }