Cross browser CSS

Using multiple style sheets

[rakhi]

Hi All,

I'm a somewhat css novice...can I use different external style sheets to support different browsers.

Currently I have the one which supports Mozila/FF however the page doesn't load correctly in IE.

I've tried a few hacks off the web but no luck.

Tips are much appreciated - Thank You.

[Marshall]

Use "If" statements and you can have as many style sheets as you want, i.e:

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

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

You can also do browser specific:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6_main.css" />
<![endif]-->

Marshall

[jdsuperstar]

I just finished writing some code to differ IE & Other browsers because I had a .png image which was transparent.

Basically, I wrote two bits of code, one for IE one for Firefox. Both loaded into my style sheet.

In the head of html file:

<script language="javascript" type="text/javascript">
function printBanner() {
var ua = navigator.userAgent.toLowerCase();
// Detect Browser -- IE or Firefox etc...
if (ua.indexOf('msie')!= -1) {
var detectPng = true;
}
else {
var detectPng = false;
}
// Display Banner
if (detectPng == true) {
return("<DIV ID='mybanner'></DIV>");
}
else {
return("<div id='mybannerF'></div>");
}
}
</script>

CSS:

/* Banner */
#mybanner {
position:relative;
height:200px;
width:600px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo047-banner2.png',sizingMethod='scale');
}
#mybannerF {
background:url(images/logo047-banner2.png);
height: 200px;
width: 600px;
border:0px;
position: absolute;
right: 300px;
}

You can add alot more, or customise it alot more to your own liking. But this is just a sample of what I had,.. if you got more problems post :) ill try help out.

But yeah, IE likes being a bit gay... so if statements are the way to go.

[Marshall]

jdsuperstar,

Just remember, if the visitor's browser has the javascript disabled, your browser detector won't work and, in turn, neither will the CSS. Just something to think about.

Marshall

[rakhi]

Thanks all - Tips are much appreciated

[Fotiman]

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

No, no, no. Conditional comments only work for IE/Win. They do not work in other browsers like Firefox (which is what I would guess the above is attempting to target).

Your best bet is to develop your site to a standards compliant browser (like Firefox) first, and then tweak it as needed to get IE to behave. You *can* use conditional comments to include an IE-only hack file.

[rocknbil]

^ ^ Votes yes on that one. Doing **anything** to support a particular browser is always going to be a short term fix.

Currently I have the one which supports Mozila/FF however the page doesn't load correctly in IE.

First answer these two: Does the page use a valid document type? Does the page validate?

If you have a yes on both of these you should get "near" compliance in IE 7, it's only IE 6 you have to work around. So far, most of the problems I've personally encountered have to do with box model differences and tweaking the padding/margins get IE 7 to play along with FF.

If you'd like to post some code I'm sure many here would be glad to help out.