Fog Creek Software
Discussion Board




Changing CSS with Javascript

Is it possible to use Javascript to link to a different external stylesheet based upon whether the browser is IE 5.0 or 6.0? I'm trying to work around rendering differences between the two.

Any help/sample code appreciated.

CSS Newbie
Tuesday, July 22, 2003

At the start of the page javascript to do

document.write <html to link css>

, depending on which browser the user is using.

Marcio Mohriak
Tuesday, July 22, 2003

While you can select stylesheets in this manner...

- What if someone is browsing with javascript turned off (One assumes they will have no CSS,  which will invariably look worse than the differences you currently have)

- How do pages look for someone using Opera / Mozilla / Netscape / Safari / Some other browser (Consider:  will you need to maintain 2, 3, 4 or more different stylesheets for the different browsers?)

- It's possible that the differences that you are seeing can be fixed using CSS voodoo-magic.  Have a look at http://css.nu/pointers/bugs-ie.html to see if the difference in behaviour can be worked around

- http://www.alistapart.com/stories/fear2/ is another article which is worth having a look at, so far as wrangling CSS to work acceptably in all browsers.

Christine D
Tuesday, July 22, 2003

Thanks. It's actually for an internal application, so I'm avoiding the full horror of having to support Netscape et al.

CSS Newbie
Tuesday, July 22, 2003

The irony being, of course, that Netscape 7 and Mozilla have MUCH better CSS support than IE. :)

Horror indeed...

Brad Wilson (dotnetguy.techieswithcats.com)
Tuesday, July 22, 2003

If its an internal App then your much better off moving the logic to the server with ASP or PHP.

You can never rely on Javascript, and its a pest to support when people keep complaining about little yellow triangles.

Ged Byrne
Tuesday, July 22, 2003

How is the CSS support in Netscape/Mozilla better than IE?

SomeBody
Tuesday, July 22, 2003

Generally CSS support is better in Mozilla because it does what you expect it to.

Simon Lucy
Tuesday, July 22, 2003

"Better" in this case means "more full featured and compliant with the specifications".

Brad Wilson (dotnetguy.techieswithcats.com)
Tuesday, July 22, 2003

You're best bet if you're only supporting IE5/6 for an internal application, is to utilize the Box Model Hack (google for Tantek Box Model Hack).  That will allow you to work around IE's broken Box Model implementation in IE5/win and IE5.5/win.

Mozilla's rendering engine, Gecko, is used to power Firebird (was Phoenix), Camino (was Chimera), Netscape (6+), and some others.  Gecko is widely considered one of the best (that is, most stable and likely to adhere to standards) rendering engines available.

Other rendering engines include KHTML (used for Safari (mac) and Konquerer).  It is probably the second best rendering engine around, its also open source and undergoing active (and rapid) development.  Its code is much smaller and possibly faster than Gecko, but it may not handle as many poor implementation scenarios as Gecko.

Finally there are a few other rendering agents such as Opera and IE5/mac (an entirely different rendering engine than IE*/win (Tasman - worked on by Tantek Celik (of the box model hack)), and I'm sure I've missed a few.  But those are really the ones you need to pay attention to when designing for the masses.

Its actually less dificult than it may seem, you just have to learn how to work around IE5/win mostly.  There are minor cases where IE5/mac has some minor scrolling issues, and a few have different handlings of minor white-space issues.  By and large not too difficult once you get into it.  If you need more help, use Google (actually Google Groups is probably the best support tool for this).

Lou
Tuesday, July 22, 2003

Why CSS? Why not HTML 4? Is what you need so fancy that HTML 4 + very commonly supported CSS can't handle it?

Or do you just have another know-it-all designer that hates every browser but _____ and will only design websites for that browser?

www.marktaw.com
Wednesday, July 23, 2003

Mark,

I'm using HTML 4. I'm trying to work around rendering bugs caused by differences in IE 5's and IE 6's CSS support.

As I've already explained, it's an internal application and our browsers are either IE 5  or IE 6. I have no control over that.

CSS Newbie
Wednesday, July 23, 2003

What I mean is... what is your end goal, it's not CSS with Javascript, it's some sort of design element that you're having trouble implementing.

Tell us what that design goal is, and then we may be able to give you more suggestions than the ones you're explicitely asking for.

www.marktaw.com
Wednesday, July 23, 2003

IE just doesn't support as much of CSS as Mozilla/Firebird does. And CSS support Mozilla/Firebird has been progressing at much faster rate than IE.  IE is the "Netscape 4" of the next few years....the browser with the worst standards support.

fool for python
Friday, July 25, 2003

*  Recent Topics

*  Fog Creek Home