Crossbrowser CSS Tips: crossbrowser css, css, ie 6 css tips, crossbrowser web development

Most web designers often experience crossbrowser issues during interface design / development. On common problem is with Internet Explorer due to its rendering discrepancies between previous versions. Here are some techniques I use to help avoid crossbrowser interface design problems.

1: Reset CSS
All browsers have different default margin padding values and we don't want to need to specify margin padding each time when we define a new class. So let's reset default margin and padding.

*{margin:0px;padding:0px;}

1:

Select all Open in new window

2: Internet Explorer Tips
We all know that the Internet Explorer series causes trouble. Here are some particular techniques for detecting IE version and composing a special CSS to hand differences.

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

1:
2:
3:

Select all Open in new window

The code above links IE.CSS if the browser is Internet Explorer regardless of its version. And here is a more specific one for version detection.

<!--[if IE6]>
    <link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

1:
2:
3:

Select all Open in new window

But I prefer inline separators unless there isn't any major change. For instance:

<style>
.someClass{
 background:red ;    /*This is for all browsers*/
 .background:blue;  /* This is for internet explorer 7 */
 _background:green ;/* This is just for IE 6 */
 *background:black;  /* This is for all internet explorer except IE 8 */
 width:300px;
 height:300px;
}
</style>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

Select all Open in new window

So if you run the code above and test it using for instance, BrowserLab, you'll realize that ...

*background:black

1:

Select all Open in new window

...makes the box's background black for IE6 and IE7 whilst it is red for rest of the browser sets.
If you remove that line and rerun the test, IE6 will render the box background as green, IE7 will render the box background as blue, while IE8 and other browsers rendering will be red.

Also if you just want to assign attribute value for IE6 you may use !important
For instance:

.someClass{
 background:black ;!important
 background:red ;/*This is for all browsers*/
 width:300px;
 height:300px;
}

1:
2:
3:
4:
5:
6:

Select all Open in new window

As the output of the line above, IE6 will render the background as red because it doesn't know the command of
!important
whilst other newer browsers render it as black and won't override the first value due to that directive.

3: Having trouble with other browsers?
Sometimes we may need to define special handling just for Safari:

html:lang(en)>body  .someClass {background:orange}

1:

Select all Open in new window

Or for Chrome:

body:nth-of-type(1) .someClass{
   background:teal;
}

1:
2:
3:

Select all Open in new window

If we just append the browser set fixes at the very bottom of our CSS sheet, they will basically override previous definitions for specified browsers.

Gain Access to all our Tech Resources

Get personalized answers

Ask unlimited questions

Access Proven Solutions

Search 3.2 million solutions

Read In-Depth How-To Guides

1000+ articles, demos, & tips

Watch Step by Step Tutorials

Learn direct from top tech pros

And Much More!

Your complete tech resource

30-day free trial. Register in 60 seconds.

Crossbrowser CSS Tips

Reset CSS

Internet Explorer Tips

Having trouble with other browsers?