CSS hack for width attribute on IE8 and below

Question

I am trying the following CSS hack for IE8 and below:

 .class {
        background-color: #BFBFBF;
        width: 1154px;
        width: 930px \9;
       }

But this CSS hack is affecting IE9 also.

Could you please help me to apply this width attribute only for IE8 and below?

There's a possibility the developer has no access to the HTML, which is where a CSS hack comes into play. There's even the possibility the developer has no access to the selector, so a property hack only would be the only possibility. — Dan Eastwell, Nov 08 '13 at 17:18

score 4 · Answer 1 · answered Apr 04 '13 at 17:44

4

The other answers are better answers - you should be using conditional comments. But to answer your question as to why what you're doing isn't working, try

width: 930px\9;

Without the space.

answered Apr 04 '13 at 17:44

psychobunny

1,247
9
16

1

I had tried this earlier and now also but didnt work. I dont want to use other options as I am using SASS, so the code added to SASS files get converted to CSS files and cannot add conditional statement at SASS as it throws exception while compiling – Niranjan Kumar Apr 05 '13 at 08:33

score 0 · Answer 2 · answered Apr 04 '13 at 16:44

0

Use conditional comments.

<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->

answered Apr 04 '13 at 16:44

j08691

204,283
31
260
272

score 0 · Answer 3 · answered Apr 04 '13 at 16:45

0

While I would advise against browser-specific CSS at all, your best bet would be to use conditional comments.

<!--[if lte IE 8]><html class="ie8-"><![endif]-->

.ie8-.class {
    width: 930px;
}

answered Apr 04 '13 at 16:45

Explosion Pills

188,624
52
326
405

score 0 · Answer 4 · answered Apr 04 '13 at 17:19

Rather than resorting to a bunch of hacks, I would really advise taking advantage of javascript (see http://modernizr.com/) to place your browser type as a class in the html tag. So, the markup of your page in IE8 would include:

<html class="ie8">....

That way, you can reference browser specific classes in your style sheet:

.class {
    background-color: #BFBFBF;
    width: 1154px;
}
.ie8 .class {width: 930px}

CSS hack for width attribute on IE8 and below

4 Answers4