Targeting IE 7.0
I’ve only found a couple of ways to specifically target IE 7.0 in my code so far. It’s hard to work out how to fix something in a browser that is so new and I have very little experience developing for.
The two main ones for me are conditional comments and the “first-child+html” fix found by Mark Hammond.
Conditional Comments
Conditional comments are small scripts that you place in your HTML. They check for the version of IE being used, and include whatever you put between the comments if conditions are satisfied. Here’s an example:
<!--[if IE 7]>
Include my IE7 only stylesheet here.
<![endif]–>
Personally, I tend to stay well away from conditional comments. The idea of putting small scripts within HTML comments makes me shudder. It’s also basically a simple form of browser sniffing, and really, I don’t want to go back to those days thank you very much.
The “first-child+html” workaround
For now, my solution of choice is a little bit of CSS trickery to target IE7 specifically. I’ve used this workaround on this very site. I was having trouble with the logo being too close to the top of the window in IE7. What I wanted was to add an extra 20px of padding to the top of the logo in IE7 only:
#menuBar {
float: right;
display: inline;
width: 240px;
}
/* For IE7 */
*:first-child + html #menuBar {
padding-top: 20px;
}
This worked a treat, and is perfect for the small fixes I need right now.
Mark Hammond goes on to note that this fix only reliably works when your page starts with a doctype and html element together (which is 99% of the time I would bet).
This of course exploits a bug in IE7, so there is no guarantee it will work in future updates. For now though, it provides the quick fixes I need until I can explore the browser further.
Who knows of any other workarounds for IE7? I’d be interested to hear how you are fixing your sites up to work with Microsoft’s latest.
4 People Added Their Comments
Very nice workaround. Should be very helpful in targeting IE, since it doesn’t really like the standards (yet). I normally use conditional comments if I have to fix something, otherwise I just try to remove functionality until the site works in all browsers. Otherwise, I just let IE mess it up and leave it that way.
There’s no argument that a conditional comment and a separate CSS file for IE7 are not comfortable. But at least they are risk free.
Using the exploit WILL backfire when the bug is fixed. I wouldn’t want to have to check my site(s) every day..
You say that using conditional comments is “basically a simple form of browser sniffing” and that you don’t want to go that way. Surely the whole point of your post is that you want to sniff out IE 7, so I don’t see the problem – it does exactly what you want.
Personally I think conditional comments are much much much neater that hacks. It allows you to write proper CSS for proper browsers, and keep all the fixes for IE separate – perfect.
Nice refreshing site design by the way, I like it.
Yes I think conditional statements are elegant too, a nice workaround for the many bugs we encounter.
By introducing more CSS trickery though, we do get ourselves used to a few more years of inadequate CSS support. One day Microsoft will finally support the full CSS set. One day…
Nice trick though, I’ll remember it!