PDA

Click to See Complete Forum and Search --> : Different CSS StyleSheets For Different Browsers

Scorwolf
12-30-2006, 06:47 AM
Need Help
i made Different CSS StyleSheets For Different Browsers (IE,Firefox)
But I Stoped In How To Load This Styles For each browser

just have a look in this javaScript Code,

function br_type(){
var is_major = parseInt(navigator.appVersion);
var is_minor = navigator.appName;

document.writeln (is_major);
document.writeln (is_minor);


if(is_major==4){

alert("Internet Explore");

}else {

alert("FireFox");

}
}


How Can I Import The CSS Code To Apply Using This JavaScript Code

Or Suggest Another

Thank You .
kiwibrit
12-30-2006, 07:52 AM
I am not clear why you need different style sheets for each browser. So far, I have found that whilst different browsers may need styling to allow for them, the only browser that needs wholly different variations is IE - and a style sheet for that can be called in by a conditional statement. I am unclear why you would want to use javascript.
ray326
12-30-2006, 01:10 PM
If you have to make allowances for IE then use IE's proprietary conditionals to deal with it.
Scorwolf
12-31-2006, 08:11 AM
Thank You "kiwibrit" For Reply
To clear my question I've a problem with IE,Firefox

There's a big different between the presentation of IE and Firefox for the same StyleSheet

for Example the display of margin if you made it in styleSheet like this

#div_no_01{margin-top:10px;}

IE7 will make it as it is but Firefox will Make a different presentation for this

so i think if i made to styleSheets for each browser And a Script to import the styleSheet for each browser this will be better
patenaudemat
12-31-2006, 06:28 PM
Firefox and other browsers generally handle stylesheets the way they're meant to be displayed. Therefore, you should do one stylesheet for everything except Internet Explorer, and make that your main sheet.

Then, in the header of your page, do something like this:


<!--[if IE]>
<style type="text/css">

/* Put your fixes for Internet Explorer here */

</style>
<![endif]-->


Then put any CSS fixes you need for Internet Explorer in between those style tags. These are called conditional comments, and are proprietary-- they only work in Internet Explorer (like kiwibrit and ray326 said). For more information, take a look at the Quirksmode page on conditional comments (http://www.quirksmode.org/css/condcom.html).

Hope it helps!

-Matt
Scorwolf
12-31-2006, 06:58 PM
thank you "patenaudemat" for your time and effort so much
Jeff Mott
12-31-2006, 07:53 PM
There's a big different between the presentation of IE and Firefox for the same StyleSheet
for Example the display of margin if you made it in styleSheet like this
#div_no_01{margin-top:10px;}
IE7 will make it as it is but Firefox will Make a different presentation for thisScorwolf, as others have pointed out, Firefox tends to parse and interpret CSS more correctly than does IE. Fortunately, IE provides conditional comments, which allow you to target IE specifically.

Also, I've found that when CSS is written carefully, there should be very few -- if any -- differences between IE and FF. Top margin, in particular, is not something that should cause problems. Check the example page below in both browsers. Both will display an exact 10px margin. In your page, there must be other rules that are confounding the rendering.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-us">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<title></title>
<style type="text/css">
#Box1, #Box2 { width: 400px; height: 250px }
#Box1 { background-color: gray }
#Box2 { background-color: silver; margin-top: 10px }
</style>
</head>

<body>
<div id="Box1"></div>
<div id="Box2"></div>
</body>

</html>