<

Crossbrowser CSS Tips

Published on
9,673 Points
3,173 Views
5 Endorsements
Last Modified:
Approved
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

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

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}

Open in new window

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

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]
5
Comment
Author:Ali Kayahan
0 Comments

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Join & Write a Comment

In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Other articles by this author

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month