browser detection and css

J

jnc3196

Help needed, the script below detects the correct browser but doesn't
select the correct CSS file. Also how to call it from an external js
file so as not to repeat it in every page.

<html>
<head>

<script language="JavaScript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;

if (browser_type == "Microsoft Internet Explorer" && (browser_version
= 4)) {
Click to expand...
document.write("<I>You appear to be using Microsoft Internet
Explorer</I>");
}
else if (browser_type == "Netscape" && (browser_version >= 4)) {
document.write("<I>You appear to be using Netscape</I>");
}
// --></script>

<script language="JavaScript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;

if (browser_type == "Microsoft Internet Explorer" && (browser_version
= 4)) {
Click to expand...
document.write("<link REL='iexplorer.css' TYPE='text/css'>");
}

else if (browser_type == "Netscape" && (browser_version >= 4)) {
document.write("<link REL='netscape.css' TYPE='text/css'>");
}

// --></script>

</head>
<body>
 
V

VK

Help needed, the script below detects the correct browser but doesn't
select the correct CSS file. Also how to call it from an external js
file so as not to repeat it in every page.

<html>
<head>

<script language="JavaScript"><!--
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;

if (browser_type == "Microsoft Internet Explorer" && (browser_version
document.write("<I>You appear to be using Microsoft Internet
Explorer</I>");
}
else if (browser_type == "Netscape" && (browser_version >= 4)) {
Click to expand...

That's an unexploded ammo from the Browser Wars Where did you dig it
out? Put it back into soil immediately!

There is not Netscape 4 anymore, a bounch of browsers has "Internet
Explorer" added in the userAgent string and any workarounds of that
time has no relevance to this time anyway. If you tell what kind of
particular discrepancies you want to deal with, we'll find a working
modern solution.
 
I

Ian Collins

Help needed, the script below detects the correct browser but doesn't
select the correct CSS file. Also how to call it from an external js
file so as not to repeat it in every page.
Click to expand...
Why don't you just use IE specific conditional includes?

<!--[if IE ]>
<link ..... />
<![endif]-->
 
T

totalstranger

Help needed, the script below detects the correct browser but doesn't
select the correct CSS file. Also how to call it from an external js
file so as not to repeat it in every page.
Click to expand...
Why don't you just use IE specific conditional includes?

<!--[if IE ]>
<link ..... />
<![endif]-->
Click to expand...
The following works for me and allows IE7 and all other browser to use
my default css. However, it does not pass the W3C HTML validation.

<!--[if lte IE 6]>
<LINK REL="stylesheet" TYPE="text/css" HREF="CSS/IE5.css">
<![endif]-->
<![if gte IE 7]>
<LINK REL="stylesheet" TYPE="text/css" HREF="CSS/Default.css">
<![endif]>
 
J

jnc3196

The following works for me and allows IE7 and all other browser to use
my default css. However, it does not pass the W3C HTML validation.
Click to expand...

Thanks for the responces, I'll try this out.

"If you tell what kind of particular discrepancies you want to deal
with, we'll find a working modern solution.", VK

Problem: The web site looks different under Firefox and Iexplorer 6.
The solution is to load a different CSS file depending on the browser.
I would like to link each page to a javascript browser detection script
so I don't need to paste the script into every html file.
 
M

Matt Kruse

Problem: The web site looks different under Firefox and Iexplorer 6.
Click to expand...

This is not necessarily a problem. Why must it look identical?
The solution is to load a different CSS file depending on the browser.
Click to expand...

A better solution might be to write more portable, bullet-proof css.
 
J

jnc3196

Mon said:
This is not necessarily a problem. Why must it look identical?
Click to expand...

I use Firefox, most of the viewers will be using Iexplorer. The fonts
are different sizes and images don't position correctly.
A better solution might be to write more portable, bullet-proof css.
Click to expand...

I've tried such portable CSS files. They don't word as advertised and I
don't understand enough of the syntax to write one. How difficult is it
of the browser developers to get them displaying the same.

Here's one that shows promise ..
http://www.digiways.com/articles/php/dyncss/jscssmethod.html
 
M

Matt Kruse

I use Firefox, most of the viewers will be using Iexplorer. The fonts
are different sizes and images don't position correctly.
Click to expand...

Do you have an example url?
If images position incorrectly just because of font size, you are probably
misusing css or need to reconsider your design.
Here's one that shows promise ..
http://www.digiways.com/articles/php/dyncss/jscssmethod.html
Click to expand...

Yuck. Don't look at the user agent to serve up different css! This is always
bad.
 
J

jnc3196

Do you have an example url?

Not yet, at the rate I'm going at maybe in a few weeks
Yuck. Don't look at the user agent to serve
up different css! This is always bad.
Click to expand...

Ok, so its back to a single css with conditionals for Iexplorer. By the
way this script does work except it won't load opera.css under Opera
9.02

document.write('<link rel="stylesheet" href="http://somesite.com/');
var agt=navigator.userAgent.toLowerCase();
if (agt.indexOf('opera') != -1) document.write('opera.css');
else if (agt.indexOf('gecko') != -1) document.write('mozilla.css');
else if (agt.indexOf('msie') != -1) document.write('iexplorer.css');
else document.write('default.css');
document.write('" type="text/css">');
 
I

Ian Collins

Matt said:
This is not necessarily a problem. Why must it look identical?




A better solution might be to write more portable, bullet-proof css.
Click to expand...
I normally end up with a few entries in an IE specific css file to cope
with the things IE doesn't implement, like :hover.

I don't think it's possible to get table borders consistent without IE
specific entries.
 
M

Matt Kruse

Ok, so its back to a single css with conditionals for Iexplorer.
Click to expand...

Or not. Just design css that works in both. If there are compatability
problems, use different features or change your design to not rely on
unimplemented features.

There is going to be a lot of pain in the world when IE7 is released,
because people have used hacks and browser-detection to serve up different
css to different browsers. IE7 will support css much better than IE6, and
detection/hack scripts that previously tried to make sites look good in IE6
will start making sites look _bad_ in IE7.

BTW, if you aren't using a strict doctype, start with that. Using
cross-browser css becomes much easier once you are in strict mode.
 
V

VK

Problem: The web site looks different under Firefox and Iexplorer 6.
Click to expand...

That is way too much of philosophy to be practical IMHO. Unless you are
doing some cutting edge stuff like behaviors/bindings/SVG/VML: you are
just dealing with simple box model discrepancies (x is lefter than
should, y is righter than I expect). Just read the "must have" article
<http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp>
(a lot of good guys went out of business before this was forced to be
implemented, so at least read it). Then place one of suggested
DOCTYPE's to unify the fox model and try it over. Ask at ciwas for more
help.
 
T

totalstranger

Or not. Just design css that works in both. If there are compatability
problems, use different features or change your design to not rely on
unimplemented features.

There is going to be a lot of pain in the world when IE7 is released,
because people have used hacks and browser-detection to serve up different
css to different browsers. IE7 will support css much better than IE6, and
detection/hack scripts that previously tried to make sites look good in IE6
will start making sites look _bad_ in IE7.

BTW, if you aren't using a strict doctype, start with that. Using
cross-browser css becomes much easier once you are in strict mode.
Click to expand...
Yep I forgot to mention that little issue--to get IE7 to use standard
CSS it MUST be in strict mode versus quirks mode, otherwise your back in
IE5/6 territory.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Browser version detection: How? 8
javascript mouseover problem 0
Working on mobile css menu with plenty of frustration! 2
Help with code 0
error: object required when declaring variable 5
JS newbie: Writing an ASP variable with JS 5
Help me sort out this script 1
Check forms With JavaScript 1

Members online

Total: 31 (members: 1, guests: 30)
Robots: 193

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,045
Latest member
DRCM

Latest Threads

Top