Crossbrowser CSS Tips

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. [code]*{margin:0px;padding:0px;} [/code][/step][step="2" title="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. [code]<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]--> [/code] 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. [code]<!--[if IE6]> <link href="ie6.css" rel="stylesheet" type="text/css" /> <![endif]--> [/code] But I prefer inline separators unless there isn't any major change. For instance: [code]<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> [/code] So if you run the code above and test it using for instance, [url="https://browserlab.adobe.com

BrowserLab[/url], you'll realize that ...

*background:black
                      

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;
                      }
                      

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.
[step="3" title="Having trouble with other browsers?"
]Sometimes we may need to define special handling just for Safari:

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

Select all Open in new window

Or for Chrome:

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

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.
[/step]