CSS hacks - Targetting IE7
Published November 28th, 2006 in CSS, IE7A simple hack to target IE7 only:
/* Target IE7 only */
html>body #getquotebox {
*background: url(../images/loginbox-bg.jpg) 10px left no-repeat;
}
/* end */
html>body #getquotebox {
*background: url(../images/loginbox-bg.jpg) 10px left no-repeat;
}
/* end */
Can be used in cases where conditional comments can't be, for whatever reason.
Thanks! This will be the only little tiny bit of code that isn't valid on my site because I've run into a problem in IE that can't be solved any other way. It's the one when you center the background in the body with background-position: center; and you center the header div with margin: 0 auto; and it ends up 1 pixel to the left in IE. Very annoying. They need to solve that!
By the way does this work in previous IE browsers or is it just for IE7?
I'm a perfectionist so it's a bit annoying that the code isn't valid now but it's still not as annoying as the align problem was.
I found a guide to one solution but it doesn't seem to work in my case.
http://www.positioniseverything.net/bg-centering.html
Is there really no other way…?
There's actually a hackless way to target any version of IE 7, called the "conditional comment" that is only available to IE, but is completely ignored by all other browsers. It's a hack in the sense that you're creating CSS specific to a browser type, but the advantage is that you'll always write valid CSS.
Read about its use here:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
What's great about this technique is that you can write your CSS for Firefox and other compliant browsers, then drop in a conditional comment with a new style block that will override your previous definitions. This makes your base CSS file portable and hackless.
GoofyDawg
Hi
the conditional comment feature does not work for IE 7
Hmm - conditional comments only work in IE browsers - maybe your implementation is wrong.