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!

This article brought to you by the Hiveminds Magazine - Staff. Contact us if you want to post an article or announcement anonymously