paul bennett

Internet Explorer 7 CSS filter

Posted on: January 31, 2007

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:

10 Responses to "Internet Explorer 7 CSS filter"

[…] – 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 […]

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 {
_margin-right:20px !important;/*IE6 is stupid*/
* + html li.image { margin-right:20px !important; /*IE7 is still stupid*/}

li.stats {
margin-left:20px !important;
_margin-left:25px !important;/*IE6 is stupid*/
* + html li.stats { margin-left:25px !important; /*IE7 is still stupid*/}

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 ?

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

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

Not tested, but you can try

* + html a.buttonImg span{
height: auto;

Thanks, the filter works as you say.

@Mark, sure does!

alongside the “star html” filter for IE6, this filter has become a staple in my cross-browser arsenal 🙂

I also regularly use these 2:
Opera 9.5 CSS filter
Safari / Google Chrome / webkit CSS filter


Just to say thanks for sharing this! Works a treat for me, works with IE8 too..

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: