View Full Version : Hide From All Except IE

12-20-2005, 08:08 PM

I am trying to hide some CSS styles from all browsers except IE. I have temporarily solved the problem by using two different CSSs. I need to, however, figure out a way to hide sections of CSS within the same CSS file. Does anyone know how I can make a block of a CSS only be interpreted by IE (while not interpreting the code for other browsers). Basically I need to make sure that firefox, safari, opera, etc use one section of the CSS while IE uses another. The majority of the CSS works for both so I do not want to duplicate.

Thanks for any help you may have. I appreciate it.


12-20-2005, 08:40 PM
The following will add an IE only stylesheet.

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />

12-20-2005, 08:47 PM
That is the current solution I am using right now. I was wondering if there is a way to do this within a single CSS file. I need to hide just a section of the css rather than having to create two different CSS.


12-20-2005, 09:09 PM
to supply a rule just to ie I use *



would give 400px width to ie and 500 to everyone else

12-20-2005, 09:57 PM
Did the trick! Thank you!!

Bill Posters
12-20-2005, 10:04 PM
Alternatively, if you want something which isn't going to invalidate your css…

#foo {
width: 500px;

* html #foo {
width: 400px;

12-21-2005, 02:11 AM
Alternatively, if you want something which isn't going to invalidate your css…

#foo {
width: 500px;

* html #foo {
width: 400px;

This is the correct solution as Bill said, because it is valid CSS markup.

12-21-2005, 09:44 PM
That CSS hack wont work in Internet Explorer 7.

Bill Posters
12-21-2005, 11:11 PM
That CSS hack wont work in Internet Explorer 7.

…which, given the likelihood that the problem which lead us to use the hack in the first place has been fixed in IE7, makes it a reasonably good choice for targeting IE6 and below.

12-22-2005, 10:08 PM
IE7 is primarily a security fix. Most of the HTML/CSS problems will still be there just some of the hacks to "fix" them will no longer work.

12-22-2005, 10:32 PM
IE7 Beta has some problems fixed, like the 3px gap in between a floated element and an element that is given a left margin to clear the width of the floated element. It does support transparent pngs. The double margin bug is still there. I haven't done too many tests but those are the ones that stood out.

Bill Posters
12-23-2005, 10:31 AM
Unless I've missed something and they've recanted on the following statement, IE7 claims to have some fairly significant code handling improvements over IE6, including fixes for many issues which lead developers to deliver alternative CSS to that browser.
(Iirc, the betas haven't so far included all of the fixes/improvements.)

IEBlog (http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx)

In IE7, we will fix as many of the worst bugs that web developers hit as we can, and we will add the critical most-requested features from the standards as well. Though you won’t see (most of) these until Beta 2, we have already fixed the following bugs from PositionIsEverything and Quirksmode:

* Peekaboo bug
* Guillotine bug
* Duplicate Character bug
* Border Chaos
* No Scroll bug
* 3 Pixel Text Jog
* Magic Creeping Text bug
* Bottom Margin bug on Hover
* Losing the ability to highlight text under the top border
* IE/Win Line-height bug
* Double Float Margin Bug
* Quirky Percentages in IE
* Duplicate indent
* Moving viewport scrollbar outside HTML borders
* 1 px border style
* Disappearing List-background
* Fix width:auto

In addition we’ve added support for the following

* HTML 4.01 ABBR tag
* Improved (though not yet perfect) <object> fallback
* CSS 2.1 Selector support (child, adjacent, attribute, first-child etc.)
* CSS 2.1 Fixed positioning
* Alpha channel in PNG images
* Fix :hover on all elements
* Background-attachment: fixed on all elements not just body

12-23-2005, 09:27 PM
I think I got the wording a bit backwards before. The

* html

hack wont work properly with IE7 because the browser will always apply the hack even when it shouldn't because some of the problems that the hack is intended to correct will have been fixed.

So you will need to test

<!--[if IE 7]> <[endif]-->

to override the * html hack.

12-23-2005, 09:41 PM
Then why not just feed to browsers less than IE7?

<!--[if lt IE 7]><![endif]-->
You won't even need the * html hack in the IEonly CSS because the * html hack would be used only if it was one stylesheet being used that was being fed to all browsers.

Bill Posters
12-23-2005, 10:25 PM
Bearing in mind that the OP was after a way to target currently available versions (i.e. IE6/Win and below) without requiring an additional style sheet, the * html 'hack' remains a reasonable way to target said browser versions even after IE7 has arrived.
Consequently, I foresee * html getting continued use from those who would rather keep their (non-invalidating) hacks within their single CSS file.

If it weren't for the fact that I generally tend to add a second, IE/Win-specific CSS file (between conditional comments) to house the proprietory filter properties for PNG24 opacity support, then I would almost certainly use * html to address the problems of IE6/Win and below from within my main CSs file.

MS themselves have now openly attempted to 'deprecate' the use of * html as a means to target IE/Win as IE7's ignorance of that selector makes it unreliable as a means to target the new browser.
Those who are using * html to target specificially IE6/Win and below are using is fairly wisely.

IE6/Win and its bugs will still be with us for a while, so it will still need targeting.
I'm not saying that it should definately be used instead of conditional comments, just that it's an quick and efficient alternative which many, myself included, still see a practical use for.

It's just a matter of knowing its uses and its limitations and using it wisely.