Tips and Tricks

5 ways to make your CSS behave in IE

Some call them bugs others say they are hacks and still others say that they are "work arounds" the abominations of software programming. I call them a necessity. They are something you cannot ignore or do without. They are cross-browser CSS techniques. Here are four of most used techniques and one that goes unnoticed so that you can recognize them the next time you open a CSS file or are trying figure out how others accomplished a design.

1. !important ignored by IE

Normally in CSS whichever rule is specified last takes precedence. However if you use !important after a command then this CSS command will take precedence regardless of what appears after it. This is true for all browsers except IE. An example of this would be:

margin-top: 3.5em !important; /* non IE browsers */
margin-top: 2em; /* IE Browsers */

So, the top margin will be set to 3.5em for all browsers except IE, which will have a top margin of 2em. This can sometimes come in useful, especially when using relative margins (such as in this example) as these can display slightly differently between IE and other browsers.

2. Use * html body #id

The alternative to using !important to get around IE CSS rendereing, try using * html body before your class/id declaration. IE is the only browser, that I've found, that recognizes things in the format of * html body #content.

#myclass margin-top: 3.5em; /* non IE browsers */
* html body #myclass margin-top: 2em; /* IE Browsers */

CSS is designed to overwrite previously specified declarations. So placing these the IE code at the end of the file or after each non IE statment to insure IE will overwrite the CSS declarations above it.

3. Use html>body #id

This is a reverse of the above in which the non-ie web browsers use the HTML tag.


#header {margin-bottom:3em}/* IE browsers*/
html>body #header {margin-bottom:1em}/* non-IE browsers*/


IE can't understand the second CSS rule, due to the

html>body

CSS command, so it will ignore it and use the first rule. All other browsers will use the second rule.

4. Use CSS 2.1 standards

There are also things that appear in CSS 2.1 that IE6 does not understand.

1. The underscore ("_") is allowed in CSS identifiers by the CSS2.1 Specification
2. Browsers have to ignore unknown CSS properties
3. MSIE 5+ for Windows ignores the "_" at the beginning of any CSS property name

Therefore, a CSS definition, e. g.is:

_color:red

1. Correct, for CSS 2.1 specification allows it.
2. Ignored in any browser but IE
3. Treated as

color:red /* IE Browsers */

Thus, this IE's bug/feature is very simple and clear way to set CSS properties for IE only (Macintosh IE doesn't have this bug/feature). It's easy to fix e. g. mis-implemented

position:fixed

in WinIE

#menu {
   position: fixed; /* non-IE browsers */
   _position: absolute; /* IE browsers */
   ...
   }

While you may not use these techniques or want them in your arsenal of coding tricks. It is important that you learn to recognize them. Because others passing you code are certainly going to be using one or two of them.

5. Use <!--[if IE]><![endif]--> tags

IE also has it's own propietory solution to placement of CSS code that only IE can see and not the other browsers on the market. Any CSS styles set between these tags is interpreted by Internet Explorer while the others interpret the contents as a comment.

<!--[if IE]>
<style>

#boook{width:168px;}
#contracted, #expanded{
    margin:0 0.4em 0 0;

}
</style><![endif]-->

A word about IE7

IE7 will have to bring with it improvements that allow the cross-browser techniques used to remain in place. If this is not done then the adoption rate of IE7 will be very, very low. This is to say IE7 will have to behave like a standards based non-IE browser or it will have to support the same cross-browser techniques as IE6 does now. If it adds in a third set of rules it will be dropped before it begins.

Happy Publishing!

Discussion

4 comments for “5 ways to make your CSS behave in IE”

1. 

   The claim that !important does not work in Internet Explorer is wrong, unless you’re talking about really old versions. It works fine in IE 6 and later.

   Posted by Anonymous | January 26, 2007, 16:42
2. 

   Have you tested this or are you guessing? In the article there is now a test box using the following code. If !important worked in IE6 then the box would look the same in both browsers. But it does not because IE6 continues to use the last defined statement even though it is being told to use the first via !important.

   .testbox {
   width:100px;
   padding:10px !important;
   padding:20px;
   border:1px solid #CC0000 !important;
   border:5px dotted #CC0000;
   }

   Posted by Anonymous | January 26, 2007, 22:20
3. 

   !important works in IE6, when used as originally “intended”, i.e. that the !important attribute is not overridden inside the same style declaration (as this does not really make a lot of sense if trying to write clean code).

   I see from your example that IE6 clearly has a bug which makes it ignore the !important if overridden the way you show, no doubt about that. But this does not mean it should be claimed that !important is ignored without further specifying in what exact _context_ it happens.

   Compare with this modified example, showing the “proper” context where it does work:

   .testbox {
   width:100px;
   padding:10px !important;
   border:1px solid #CC0000 !important;
   }

   .testbox {
   padding:20px;
   border:5px dotted #CC0000;
   }

   (BTW: I’m not trying to “defend” IE in any way, as it causes me a _lot_ of trouble as well. I’m just trying to point out that claims of what works or not should be very spesific, to avoid misunderstandings.)

   Posted by Anonymous | January 29, 2007, 10:13
4. 

   Hmm,

   Your point is well taken but I think the first lines of the article pretty much explain what to expect in the code. I don’t think the author was out to use things as “intended”.

   Posted by Anonymous | January 29, 2007, 16:16

Post a comment

Name *

E-mail *

Web site

Comment