0

In my css code i have tose hack that i want to affect IE6/7

#topmenu li a.activa,
#topmenu li a.activa:hover{
    *background: url(../nImg/comunHomeSprite.png) no-repeat;
    *background-position: right -2169px;  
    *float:left;
    *margin:0;
    *padding:0;
    *margin-left:10px;
}

Is there a simple way to convert them into IE8 also??

AstroCB
  • 12,337
  • 20
  • 57
  • 73
Toni Michel Caubet
  • 19,333
  • 56
  • 202
  • 378

3 Answers3

3

If you must use hacks, then read this: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

But note that CSS hacks are considered evil.

Conditional comments are a good alternative. They are easy to use, and guaranteed to work properly.

You can't put conditional comments directly into a stylesheet, but what you can do is define a class in your <body> tag using conditional comments, which you can then reference in the CSS:

Write your HTML <body> tag like this:

<!--[if IE 6]> <body class="ie6 ltie7 ltie8 ltie9"> <![endif]-->  
<!--[if IE 7]> <body class="ie7 ltie8 ltie9"> <![endif]-->  
<!--[if IE 8]> <body class="ie8 ltie9"> <![endif]-->  
<!--[if IE 9]> <body class="ie9"> <![endif]-->  
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

Then in your CSS, you can reference the relevant IE class in your selectors, and you'll have completely valid CSS code:

#topmenu li a.activa:hover {
   /*normal styles here*/
}

.ie8 #topmenu li a.activa:hover {
   /*IE8-specific styles here*/
}

Hope that helps.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • +1, this is a much better solution than hacks and I use it on several sites. – Andy E Oct 27 '11 at 11:43
  • i could use it. but we already use tags in body to define language and other options... it's just too expensive to change it. but i will just use rounded images -i hate explorer- – Toni Michel Caubet Oct 27 '11 at 11:59
  • @ToniMichelCaubet - re your comment: is this is all about doing rounded corners? If so, you might want to look up [CSS3Pie](http://css3pie.com/). – Spudley Oct 27 '11 at 12:06
  • haha, nice you put that out. Check this out http://stackoverflow.com/questions/7877917/piecss3-not-rounding-in-local (it's not a personal work. i have boss and everything i can't risk it won't work in local....) thanks dough – Toni Michel Caubet Oct 27 '11 at 12:26
  • hehe :) ah, I didn't notice the same user name. :-p – Spudley Oct 27 '11 at 14:09
2

Found this

selector {
    prop: value; /* real browsers */
    _prop: value; /* ie6 */
    *prop: value; /* ie6 ie7 */
    prop: value\9; /* ie8 */
}

don't know if this addresses IE9

yunzen
  • 32,854
  • 11
  • 73
  • 106
1
/* IE8 */ @media \0screen { #topmenu li a.activa, @media \0screen #topmenu li a.activa:hover {
  background: url(../nImg/comunHomeSprite.png) no-repeat;
  background-position: right -2169px;  
  float:left;
  margin:0;
  padding:0;
  margin-left:10px;
} }

I prefer this way personally as the attributes are still standard CSS and you need only change them once instead of however many different hacks you have. It can get a bit unwieldy otherwise.

  • Really? I use these hacks quite regularly. They're also documented at http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/, http://www.devblog.co/internet-explorer-css-hacks/ IE8 one at http://www.coding4streetcred.com/blog/post/CSS-Cross-Browser-Hacks.aspx –  Oct 27 '11 at 11:21
  • Just noticed I missed a pair of `{}`'s, might have had something to do with it! –  Oct 27 '11 at 11:23
  • no well just copyed the selectors... might be cause of IE-Tester? – Toni Michel Caubet Oct 27 '11 at 11:36