Stylesheet for different browsers [Archive]

View Full Version : Stylesheet for different browsers

ta158897

08-06-2008, 01:37 AM

Hi,

I am new to web development and getting puzzled by incompatible browsers.

1) Should I have different stylesheets for different browsers? If yes, can I have the piece of code that sniffs the browser and choose appropriate stylesheets?

2) How should I deal the problem for every page? Should I set it in session variable? What is the efficient way to handle this?

Thanks

jscheuer1

08-06-2008, 05:42 AM

If your page is well designed with a valid URL DOCTYPE of HTML 4.01 strict, you should only need one or two stylesheets, at the most three, unless you are trying to also support earlier IE versions (5 and 5.5).

Generally it breaks down like so:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="main.css" type="text/css">

</head>
<body>

</body>
</html>

You can name them whatever you like. The main.css styles will be used by all browsers. The ie.css styles will add to or modify those.

TheJoshMan

08-06-2008, 11:16 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="main.css" type="text/css">

</head>
<body>

</body>
</html>

You forgot to mention that since CSS is in Cascading Order, if they want to completely override the styles of the "main.css" file they would need to put the conditional statement ABOVE the link to the "main.css" file.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>

</body>
</html>

TheJoshMan

08-06-2008, 11:17 AM

This could be important to prevent from having to use a lot of "!important" additives to the attributes.

Medyman

08-06-2008, 12:45 PM

You forgot to mention that since CSS is in Cascading Order, if they want to completely override the styles of the "main.css" file they would need to put the conditional statement ABOVE the link to the "main.css" file.

Actually, the opposite is true. Styles are applied top-down. Something at the bottom of a stylesheet takes precedence over that same style applied at the beginning of a stylesheet.

So, if your intent is to override a style with the IE-specific stylesheet, you should place it BELOW the main stylesheet.

jscheuer1

08-06-2008, 03:34 PM

This could be important to prevent from having to use a lot of "!important" additives to the attributes.

Styles are applied top-down. Something at the bottom of a stylesheet takes precedence over that same style applied at the beginning of a stylesheet.

So, if your intent is to override a style with the IE-specific stylesheet, you should place it BELOW the main stylesheet.

Quite correct Medyman. The !important hack and others don't really apply in this situation. Conditional comments are not hacks and do not depend upon either quirksmode or any particular browser quirks from a given version of a browser. In fact, with a valid URL HTML 4.01 strict DOCTYPE as mentioned in my previous post, many browser specific hacks will not work as expected.

TheJoshMan

08-06-2008, 04:17 PM

OOPS! sorry to give wrong info

allahverdi

08-06-2008, 04:31 PM

hmm, what about djr's guide? In tutorials forum. But it is with php. But it helps I think.

jscheuer1

08-06-2008, 05:16 PM

hmm, what about djr's guide? In tutorials forum. But it is with php. But it helps I think.

No good for browser specific stylesheets, unless you can get the user to tell you what browser they are using (not that bad of an idea). At least as far as I know, PHP cannot reliably detect the user agent (browser). And there could be server side delays (minor to unnoticeable, but this has been a consideration in this thread). You could perhaps use javascript to get that value. However, then you are relying on the client side in an unreliable manner again. Conditional comments have none of these issues. And from the looks of it are easier to implement than what is proposed in djr33's thread (though it is a good method for what he recommends it be used for).

TheJoshMan

08-06-2008, 05:45 PM

No good for browser specific stylesheets, unless you can get the user to tell you what browser they are using (not that bad of an idea).

I think it might be a small issue to get the user to input what browser they are using, (not much, but noticeable) as the average Joe who just uses the computer to surf may not know what browser they are using.

I know that they may know the difference between FF and IE and so on, but what if you are trying to implement this for "version specific", I can tell you for a fact that if you asked my mom what version of IE she uses, she'd just look at you with that "deer in the headlights" look. LOL

jscheuer1

08-06-2008, 06:32 PM

I think it might be a small issue to get the user to input what browser they are using, (not much, but noticeable) as the average Joe who just uses the computer to surf may not know what browser they are using.

I know that they may know the difference between FF and IE and so on, but what if you are trying to implement this for "version specific", I can tell you for a fact that if you asked my mom what version of IE she uses, she'd just look at you with that "deer in the headlights" look. LOL

Dear old Mom. Mine was a masters of library science, so before she retired, she knew more about computers than I did. Anyways, I was just kicking around ideas, a little fine tuning could make it a real nice way of dealing with this issue. Like you could have a javascript to detect the browser. Tell the user - such and such browser and OS detected, OK? If it's not OK, you can give them the list. Either way their choice gets recorded in a session variable. There could be unobtrusive links on each page which would allow them to change this (and perhaps other) preference(s) if it wasn't working out.

But a well designed page shouldn't need any of this. And most "deer in the headlights" users have one of the more recent versions of a major browser, so designing for them is easy. Folks using obscure and/or legacy browsers generally know what to do to make a site designed to standards work for them.

TheJoshMan

08-06-2008, 08:07 PM

boy how I wish my mom had gone to college... WAIT! No I don't! Then I wouldn't be here! LOL

TheJoshMan

08-06-2008, 08:09 PM

That is a good idea though, I just wanted to make sure that it could be manipulated in such a way that even those who didn't know what they were using per se. I see how that could work though, sniff the browser type, then inform the user and require confirmation.

Medyman

08-07-2008, 02:06 AM

Folks using obscure and/or legacy browsers generally know what to do to make a site designed to standards work for them.

Are we defining IE6 in this category? I wish MS would do a forced upgrade to IE7. It would make my life so much easier. I cannot wait for the day IE8 releases. That very second, I'm dropping IE6 support from our contract. Clients want it? No problem, for a fee!

We just got a client who wanted us to test in Flock, which I thought was very peculiar. They happily paid extra for the testing too. Even after repeated advice, that Flock is built on the same codebase as Fx 3.0.

Mac IE 5 is the only browser I will not support though.

jscheuer1

08-07-2008, 02:21 AM

I wouldn't currently call IE 6 legacy or obscure, but I certainly look forward to the day when it could justifiably be classed as legacy. It will be a much longer time before it could be called obscure. The thing holding it back (letting it hang around) in my mind is the remaining huge installed base (and the fact that MS still updates it). I also think the transition to 7 would have been much farther along at this point had it not been for all of the problems with Vista.

IE 5 Mac, for example. Legacy, sure - neither Apple nor MS support it. Obscure, well it's getting there, not fast enough IMO.

Medyman

08-07-2008, 12:46 PM

not fast enough IMO.

Amen.

TheJoshMan

08-07-2008, 01:57 PM

I happily shout "Amen" to that as well...

ta158897

08-07-2008, 07:18 PM

TheJoshMan

08-07-2008, 07:28 PM

can we see a link to the page in question?

ta158897

08-07-2008, 08:29 PM

can we see a link to the page in question?

Do not see the link!! Can you please mention it again? Thanks

TheJoshMan

08-07-2008, 10:15 PM

Do not see the link!! Can you please mention it again? Thanks

Ok ok, no need to get hasty. I was just curious if you would mind posting a link to the page you are having trouble with so that we may better assist you.

jscheuer1

08-08-2008, 01:28 AM

Hi All

Thanks for all of your input.
I have used validation service and make sure the page is validated "strict". But now I found that it is not showing the side scroll bar at Firefox. But OK with IE. I guess it would help if we could know what works at IE and what does not work at firefox. Is there any guide/ manual available? Please suggest.

Thanks

The style rules follow exactly the same order of precedence that they would if there were only one stylesheet. Whatever is in the IE only stylesheet will not be used by other browsers. If you need more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.