Question

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 ?

Answer 1

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]-->