Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Browser specific css

Status
Not open for further replies.
Nexusens

Nexusens

Programmer
Feb 6, 2007
22
CA
I know the browser detection is woorking but what am i doing wrong when calling my css file?
<script type="text/javascript">
css = new array()
<!--
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{css = "StyleIE.css";}
else if (browserName=="Netscape")
{css = "StyleNS.css";}
else if (browserName=="Opera")
{css = "StyleO.css";}
//-->
function css{document.getElementById("css").href = css;}
</script>
<link href="Style.css" rel="stylesheet" type="text/css" id="css"/>

"Tsune ni ite, kyu ni awasu
 
Sort by date Sort by votes
What if you try

Code: 
<script type="text/javascript">
<!--
cssFile = "Style.css";
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{cssFile = "StyleIE.css";}
else if (browserName=="Netscape")
{cssFile = "StyleNS.css";}
else if (browserName=="Opera")
{cssFile = "StyleO.css";}

function css(){document.getElementById("css").href = cssFile;}

//-->
</script>

<link href="Style.css" rel="stylesheet" type="text/css" id="css" />

Ron Wheeler
Tekdev Open Source Development
 
Upvote 0 Downvote
Thanks for trying but it didn't work :(

"Tsune ni ite, kyu ni awasu
 
Upvote 0 Downvote
also I am new to javascript and would like to know the function of the <-- //--> Tags


"Tsune ni ite, kyu ni awasu
 
Upvote 0 Downvote
Ok assuming all this can work, you have a few things wrong.


Problem: css = new array()
Solution : var cssArray = new [!]A[/!]rray();


Problem: No need to make a function called css.

Problem: If you were to get into the function css, which I see no calls to, the link href would be already set. It's better to set it initially.

I also recommend not naming everything css.

I personally think this is more of a server side issue, but if you want to do it client side, here's what I come up with:

Code: 
<link href="" rel="stylesheet" type="text/css" id="css"/> 

<script type="text/javascript">
var css = new Array();
<!--
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{css = "StyleIE.css";}
else if (browserName=="Netscape")
{css = "StyleNS.css";}
else if (browserName=="Opera")
{css = "StyleO.css";}
//-->
document.getElementById("css").href = css;
</script>





[monkey][snake] <.
 
Upvote 0 Downvote
It hides the code from older browsers that don't support javascript. I never use them. If you're using a browser that doesn't support javascript then you need to upgrade, plain and simple....

-kaht

Looking for a puppy? [small](Silky Terriers are hypoallergenic dogs that make great indoor pets due to their lack of shedding and small size)[/small]
uncle_rico_thumb.jpg
 
Upvote 0 Downvote
I'm a little confused as to why the css is being set to a new Array() to begin with though. It can only be set to a single string, right?

Also, you have to make sure the document has been loaded (at least the <link> tag) before this script it run, so you may want to put the link tag before this script or put the script in a function that runs on the onload event.

i.e.:
Code: 
<body onload="changeCSS()">

Code: 
<script type="text/javascript">
function changeCss(){
var css = new Array();
//or var css = "";

var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{css = "StyleIE.css";}
else if (browserName=="Netscape")
{css = "StyleNS.css";}
else if (browserName=="Opera")
{css = "StyleO.css";}
document.getElementById("css").href = css;
}
</script>

Ron Wheeler
Tekdev Open Source Development
 
Upvote 0 Downvote
Yeah, that's true, it's not even being used as an array. Didn't even think about that, just fixed bugs that popped up w/o putting thought to it.

(kinda like this code).... hahhahahaha [rofl]

No malice meant Nexusens.

[monkey][snake] <.
 
Upvote 0 Downvote
no problem ive only been learning javascript since last wensday however moonsnake your code works and ninja death monkeys does not here is the full code if either of your curiosity requires further investigation Thanks again for the help, I've been working on this for about six hours and was getting perty frustrated.

"Tsune ni ite, kyu ni awasu
 
Upvote 0 Downvote
Ok thier is somthing wrong with this aproach as my div structrue dies when I use moonsnakes code please compare
This is how its suposed to be and this is how it is with moonsnakes code at bare minumum atleast the first line of my css is loading why is it all not

here is my css
body {margin-top:0px;}
a:link {color:blue;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:green;}
.B {font-weight:bold;}
.C {text-align:center; font-family:'Times New Roman'; }
.FL {float:left;}
.FR {float:right;}
.L {text-align:left; font-family:'Times New Roman';}
.XXLTC {font-size: xx-large; text-align:center; font-family:'Times New Roman';}
.I {color:white}
.J {text-align:justify; font-family:'Times New Roman'; text-indent:50px;}
.JM {text-align:justify; font-family:'Times New Roman'; padding-left:50px;}
.NB {border-width:0;}
.R {text-align:right;}
#top {position:fixed; top:0; left:20%; height:20%; width:80%; overflow:hidden;}
#side {position:fixed; left:0; width:20%; height:100%; overflow:hidden; text-align:center;}
#contents {position:fixed; top:20%; left:20%; right:0; padding-left:2%; padding-right:2%; overflow:auto;}

"Tsune ni ite, kyu ni awasu
 
Upvote 0 Downvote
Im a dumbass, I forgot the ../ when I moved down my directory structure. What a waste of a day!!!

"Tsune ni ite, kyu ni awasu
 
Upvote 0 Downvote
I've got to ask, though... Do you *really* need all that detection anyway?

I find that one set of CSS plus an override for IE normally works to provide a consistent experience across all major browsers (no IE, Fx, NN, Opera, and Safari).

You can do the IE detection with conditional comments, so no JS required at all.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I was taught to do it with browser detection, however if i can drop my javascript that would be great. at this point the only diference between my css is a 7% Width style in IE and a 6% for everybody else. so how would I do a IE workaround for that


"Tsune ni ite, kyu ni awasu
 
Upvote 0 Downvote
Use the * html hack, or look up
conditional comments in google.

[monkey][snake] <.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

RailBatyrshin
  • Locked
  • Question
Back on the Node(ExpressJS) fetch API from WEB Browser
Replies
0
Views
90
RailBatyrshin
RailBatyrshin
javierdlm001
  • Locked
  • Question
Can JS &amp; CSS code located remotely run locally? 1
Replies
2
Views
79
javierdlm001
javierdlm001
PeDa
  • Locked
  • Question
Can only obtain element height if browser not maximised 1
Replies
2
Views
102
PeDa
PeDa
evr72
  • Locked
  • Question
Redirect script if specific id and database field then redirect 1
Replies
8
Views
124
vacunita
vacunita
GRIFFIJ
  • Locked
  • Question
Javascript and CSS 1
Replies
2
Views
53
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top