<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Crossbrowser CSS Tips

Published on
9,708 Points
3,208 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

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics ā€“ known as key performance indicators (KPIs) ā€“ for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Join & Write a Comment

In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you ā€¦
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.Sā€¦
Other articles by this author

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month