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>bodyand 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
divwith an
idof "content" that is rendered three different ways in IE 6, IE 7 and Firefox, respectively. You can use
html>bodyto 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+htmlis 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.
