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:

About these ads

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 {
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*/}

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
and
Safari / Google Chrome / webkit CSS filter

Paul

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Archives

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: