CODEWITHSUNDEEP
htmlcss
StevieB
StevieB

Reputation: 6543

CSS HTML how to ignore some css for non ie7 or ie8

So I have the following CSS for getting a background image to size to 100% of my div.

#solutionsNav div.leadgen {
background:url(/images/leadGen_bg2.png) no-repeat;
background-size: 100% 100%;  
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale')";
behavior: url(/scripts/PIE.htc);
padding: 10px;
color: #FFF;
cursor: pointer;

}

This seems to work now in all browsers but the only problem is that in IE7 and IE8 I can see the outline of the background:url(/images/leadGen_bg2.png) when the image is stretched to fit the div. And I have tested that if I take out background:url(/images/leadGen_bg2.png) in the above it works fine still in IE7 and IE8 but can no longer see it in firefox.

How could I get around this ?

Upvotes: 0

Views: 483

Answers (3)

Olly Hodgson
Olly Hodgson

Reputation: 15775

I use conditional classes to get around this issue. For example, if you replace your opening <body> tag with this:

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

...you get a series of classes targetted specifically at Internet Explorer. You can target IE specifically in your CSS, like so:

/* Good browsers */
#solutionsNav div.leadgen {
    background:url(/images/leadGen_bg2.png) no-repeat;
    background-size: 100% 100%;  
    padding: 10px;
    color: #FFF;
    cursor: pointer;
}
/* IE-specific code */
.oldie #solutionsNav div.leadgen,
.ie8 #solutionsNav div.leadgen {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale')";
    behavior: url(/scripts/PIE.htc);
}

Upvotes: 0

Samantha Branham
Samantha Branham

Reputation: 7441

To expand on Kolink's answer:

<!--[if lte IE 8]>
#solutionsNav div.leadgen { background: none; }
<![endif]-->

Make sure this rule comes after your rule you defined in your answer, so that it takes precedence. Using a separate style sheet for your IE hacks is a good idea.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Use a conditional comment to load a stylesheet exclusively for IE8 and below, and use it to load all your hax.

<!--[if lte IE 8]><link rel="stylesheet" href="ie-hax.css" /><![endif]-->

Upvotes: 3

Related Questions