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


Tags: html,css

Problem :

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 ?



Solution :

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

    CSS Howto..

    How to display a div next to another div with no width defined?

    How to read minified CSS?

    Getting CSS3 PIE.htc to show up in child elements when used on parent element

    How to select the specific position element in the certain class in CSS

    How to stretch line between two cells ( tags)

    How to toggle single element with this same class like another

    How to display a div over other content and in the center of webpage using CSS?

    How to get a jQuery modal overlay to not push the scrollbar around?

    How do I control a css child property with javascript?

    How come my divs are jumping around during a transition?

    How do you align left / right a div without using float?

    How to create a absolute element overlapping several rows in a calendar (table) design?

    2nd image appears as mirror image in IE— CSS image FLIP transform- How to fix?

    How to replicate this css media jquery using javascript to support IE

    how to copy font-family from a webpage

    How to “clear” a CSS fake table row?

    How do I load a CSS file with HTMLTextWriter

    How to give cross browser transparency to element's background only?

    How can I align centered inline-block elements correctly?

    How to get a CSS selector in PHP?

    How would you code this: The SO Announcement bar [closed]

    How to have img popout when containing div is clicked (Image gallery)?

    How long can a webpage be?

    How do I customize