Dynamically load CSS depending on Browser

**dallr** · 09-21-2008, 11:21 PM

I webpages are lining up differently in IE than Firefox. I was thinking to do some kind of browser sniffing and apply the appropriate stylesheet. So my question is how would you accomplish this.?

Then trying to search this site I found a post which says

Don't code individually for each browser. Make one css that covers them all. If you make it to standards, you will only need to add a few extra lines to make it work with IE.

But the poster who quoted above did not go on to say specifically how to do what they were recommending.

So in short my main question is: what is and how is the best way to handle styling of webpages that would be viewed in various browsers. (IE, FF, Opera, Safari).

Thanks for your help in advance
Dallr

**TheJoshMan** · 09-22-2008, 12:09 AM

conditional statements.

Code:

<!--[if IE]>
<style type="text/css">
some_element {
some_attribute: 10px;
}
</style>
<![endif]-->

**dallr** · 09-22-2008, 12:33 AM

Thanks for the reply Nyne.
But I am new to web development so be gentle with me. Please note I have to options in my first post which one were you referring to?
1. Where do I put this code? In the same CSS file or in the html page?
2. What do I put in the if statement to handle the various browsers. e.g [if IE], [if Opera], [if Safari], [if Firefox].
3. ....plus any other information you or someone else might seem necessary for me to know in this instance.

Dallr

**dallr** · 09-22-2008, 05:47 PM

Can anyone help me out here, I am sure the question I am asking is not difficult and is quite common.!!!!

Dallr

**boogyman** · 09-22-2008, 06:39 PM

IE shouldn't be the only browser that you need these types of conditional statements. The reason behind this is because the other popular browsers, Firefox/Opera/Safari/Konquerer etc... support web standards, where IE is behind in that regards.

So many websites that were/are designed with web standards need the additional IE "mods/hacks" to not have the website break when being viewed with IE.

so develop and test for standards, and then if necessary apply the modifications for specific IE fix issues

**TheJoshMan** · 09-22-2008, 10:16 PM

As boogyman stated, most of the other popular browsers (Firefox, Opera, Safari, Konqueror) comply to the standards set forth by W3C.

So, the conditional statement is MOST USUALLY used specifically for IE due to the fact that as boogyman said, "IE is behind in that regards" (which by the way I believe to be the ultimate UNDERSTATEMENT of the year).

I believe that what boogyman was telling you is to code "to standard", then fix IE if needed (usually is needed).

To use a conditional statement, you would put it in the <head> of your page, like so:

Code:

<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="main-styles.css">
<!--[if IE]>
<style type="text/css">
body{
background:#000;
}
</style>
<![endif]-->
</head>
<body>
blah blah blah
</body>
</html>

The idea behind a css conditional statement is to correct any errors which a particular browser may render in css. So, if you look at your page and everything looks great in FF, then you open it in IE and it's shifted to the left 10px... Then in your conditional statement you would need to adjust either the position, padding, or margin depending on which element is out of whack.

Let's say that your "sidebar" is shifted 10px to the left in IE, but displays fine in FF, Opera, Safari, etc... Here's how you would fix it.

Code:

<html>
<head>
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="main-styles.css">
<!--[if IE]>
<style type="text/css">
#sidebar {
margin: 0 -10px 0 0;
}
</style>
<![endif]-->
</head>
<body>
blah blah blah
</body>
</html>

The code above would shift the sidebar 10px to the right ONLY IN IE.

I hope this was simple enough to understand.