Internet Explorer 7 CSS filter

Posted by: Paul on: January 31, 2007

In: CSS
10 Comments

CSS improvements in IE7 are a great step forward, but the box model calculation still seems a little wonky.

If you do need a filter for IE7 only, use:
* + html { }

For example, if you wanted a red border on your div, but a blue one in IE7 (for whatever tenuous reason), your CSS would look like this:
div { border: solid 1px red;} * + html div { border: solid 1px blue; }
Note that you don’t seem to be able to use the IE6 and IE7 rules in one declaration – it will confuse IE6 and the * html hack won’t apply:

* html div, * + html div { /* this will NOT work for IE6 */ }

—————-

Looking to improve your CSS skills? I recommend the following:

Tags: CSS, css filter, css hack, internet explorer 7

10 Responses to "Internet Explorer 7 CSS filter"

1 | ruzee.com - Steffen Rusitschka » Blog Archive » Align List Items Horizontally with CSS …
May 6, 2007 at 5:37 pm

[…] – and it will do. Yeah I know that’s sounds strange, but it works. I’m using two different CSS filters to also support IE […]

2 | james
October 19, 2007 at 2:08 pm

even though i dislike hacking up css, a conditional comments solution would have a worse adverse effect to dirty up the html code and the distinction between content and presentation. This was the fastest and best working solution to a display problem in IE6 and IE7 regarding showing list elements around a floated image, saving me lots of time and potential headache. thanks! the result looked something like this:

li.image { float:left; list-style:none; _margin-right:20px !important;/*IE6 is stupid*/ } * + html li.image { margin-right:20px !important; /*IE7 is still stupid*/}
li.stats { font-size:0.9em; list-style-image:url(../../images/bullet02.gif); margin-left:20px !important; _margin-left:25px !important;/*IE6 is stupid*/ } * + html li.stats { margin-left:25px !important; /*IE7 is still stupid*/}

3 | Miran
December 23, 2007 at 5:01 pm

have a practical problem:
a.buttonImg span {height: 24px;}

this should be in my css for FF and not at all for IE. I see no way I could use
* + html in this case, Any ideas ?

4 | Align List Items Horizontally with CSS ... | ruzee.com - Steffen Rusitschka
October 21, 2008 at 11:45 am

[…] rule to display:inline – and it will do. Yeah I know that’s sounds strange, but it works. I’m using two different CSS filters to also support IE […]

5 | How to achieve cross-browser support for inline-block :: Aaron Russell
October 27, 2008 at 8:03 pm

[…] couple of lines to our CSS to get this working in both IE6 and IE7. By combining a couple of IE version-specific filters with a display:inline declaration after we have made our display:inline-block declaration, Internet […]

6 | julesj
January 30, 2009 at 2:37 am