CSS hacks specific to Internet Explorer 7
I thought I would do a quick post for the web developers about Internet Explorer 7, and how to do CSS hacks to target only IE7. For those that are unfamiliar with CSS hacks, they are the answer to why your compliant CSS does not seem to display properly in all browsers. More specifically, it seems that compliant websites seem to be displayed consistently in Safari and Firefox, however Internet Explorer appears to have it’s issues.
The answer has been to incorporate specific CSS directives that are interpretted only by the problem browsers. Typically the problems that I run into are problems in all Internet Explorer versions, so I have been able to get good results with what has been coined “the star html” hack. Let’s say that I have a text box element that is not displaying properly in IE, but is displaying properly in other browsers. The CSS that I have to style that text box is:
input { font: 0.9em Verdana, Arial, sans-serif color:#000000; }
But what I am seeing in Internet Explorer (version 6 or 7, I wouldn’t really worry about IE5) is that the font is being displayed too small. The solution for this using the “star html” hack would be to add an additional directive below this one that can only be read by Internet Explorer browsers such as:
* html input { font: 11px Verdana, Arial, sans-serif color:#000000; }
You can see where the name comes from. By adding the * html before the CSS selector, we have created a selector that only Internet Explorer understands. Other browsers will simply ignore it, while Internet Explorer browsers will understand it and allow us to change the styles just for users using that browser. In most cases, this will be sufficient for most CSS designs. Not only that, but from the version of Internet Explorer 7 that I have been playing with (not the one that will be released with Vista) it appears that many of the CSS shortcomings have been addressed. Not all, but enough to give them credit for. There are alot of great, if not long overdue, improvements in IE7.
There will still be times when you will need to adjust your CSS specifically for IE7. In some cases, you may have a page element that displays properly in IE6, but not in IE7. So how do you go about targeting only the IE7 browser? The answer is quite simple, and also illustrates some of the CSS2 support that has been added to IE7. Instead of the “star html” hack from above, we will take advantage of “first sibling” selector that is defined in the CSS2 specification. This selector is appropriately displayed by Firefox browsers and now Internet Explorer 7, but does not work in Safari as of version 2.0.4, so it is not widely used. Take a look at the following directive that would target only IE7:
*:first-child+html input { font: 11px Verdana, Arial, sans-serif color:#000000; }
As you can see, we are still using the star at the beginning, but now we are telling it to target the first child (in the document object model that would be the document itself). We then have a plus sign, which means “first sibling” and the html tag. The first sibling selects the next element in the DOM that is a sibling to the current element. CSS2 is an entirely different post, but the point is twofold– first of all IE7 has support for the “first sibling” and “first child” selectors, and the syntax above will work to target only IE7 browsers for CSS hacks.
Hopefully this all makes sense. Generally my advice is to develop a website using compliant code, then to go back and find display issues which need to be addressed. Once you see what needs to be fixed, you can go through and adjust your CSS to get the display right. I’d be interested to hear anyone else’s experiences with this kind of thing.
