Re: browser detection and css

jnc3196 (AT) googlemail (DOT) com wrote:

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.

Why don't you just use IE specific conditional includes?

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


--
Ian Collins.

On or about 10/1/2006 3:37 PM, it came to pass that Ian Collins wrote:

jnc3196 (AT) googlemail (DOT) com wrote:
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.

Why don't you just use IE specific conditional includes?

!--[if IE ]
link ..... /
![endif]--


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]>

on Oct 2 2006 2:01 am totalstranger wrote:

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.

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.

jnc3196 (AT) googlemail (DOT) com wrote:

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

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

The solution is to load a different CSS file depending on the browser.

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

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

Mon, Oct 2 2006 4:31 pm Matt Kruse wrote:

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

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

The solution is to load a different CSS file depending on the browser.

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

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...cssmethod.html

jnc3196 (AT) googlemail (DOT) com wrote:

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

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...cssmethod.html

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

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

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.

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">');

Matt Kruse wrote:

jnc3196 (AT) googlemail (DOT) com wrote:

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


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


The solution is to load a different CSS file depending on the browser.


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

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.

--
Ian Collins.

jnc3196 (AT) googlemail (DOT) com wrote:

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

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.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

jnc3196 (AT) googlemail (DOT) com wrote:

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

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.