JS browser detect: Switch CSS

[Geof Harries]

I am building an XHTML 1.0 Transitional & CSS website for a new client. The entire layout is of course set in layers, and they run as far as 5 levels deep. Complicated to line up? Yup!

What this means is that while the design looks fine in a Gecko-bred browser, such as Camino, Netscape 7+ or Mozilla 1.+, the page renders diferently in IE 5 on both Mac and Windows. For instance, all of the positioning that I want to use for the Gecko browsers displays 10-20 px higher up on the page in IE. I can compensate for this, but of course then I go back to the Gecko browsers, and the alignment is off. Back and forth, back and forth...

I don't need a speech about how IE sucks at modern CSS support, I just need a solution; the client of course wants the design to look great no matter what the browser.

I've searched more than a few websites, including devedge.netscape.com, alistapart.com, and evolt.org, but found next to nothing when it comes to first checking the user agent/browser, and then dynamically switching style sheets with javascript. This is the solution I assume would work most consistently.

If someone can point me to a simple javascript that sniffs for Gecko and IE, and then changes style sheets on the fly, that'd be awesome.

Thanks in advance,

geof

[abbey]

Have you looked at Peter-Paul Koch's site?

[Geof Harries]

Thanks for the link to Peter-Paul's site.

I'm trying to wade through the sea of object detect info there http://www.xs4all.nl/~ppk/js/support.html and at DevEdge http://devedge.netscape.com/viewsour...ser-detection/ to try and come up with a solid script. Hopefully I can build up a blend from these sources and get something working. Any other advice or code snippets would be great.

thanks

geof

[Bill Posters]

What this means is that while the design looks fine in a Gecko-bred browser, such as Camino, Netscape 7+ or Mozilla 1.+, the page renders diferently in IE 5 on both Mac and Windows.

I don't need a speech about how IE sucks at modern CSS support, I just need a solution; the client of course wants the design to look great no matter what the browser.

No speech, just a statement and a question...

IE5Mac has good modern css support as does Camino. There should no problem getting div-tastic XHTML 1.0 Strict layouts looking identical in Camino and IE5Mac, at least not one that requires browser-specific css files to fix.

Do you have an online version that I/we can see/check?

[Geof Harries]

Bill,

Camino 0.7, Safari v73, and Mozilla 1.3 on OS X look great. IE 5.2.2 on OS X looks good too, but it bumps the elements down the page, about 10-15 pixels lower than I'd like them to be. The link below has just been optimized for IE on both Mac and Windows (the majority of future site users), so it will appear disjointed in any of the aforementioned Gecko browsers. I'd sure like them all to look the same...which is of course the holy grail of web design

http://www.kwota.com/designoutpost/asymilate/

It's not so much that I have any funky CSS screwing stuff up, but rather just the fact they render differently enough to be noticeable, and not acceptable at this point. It's XHTML 1.0 Transitional...I've built about 3 sites this way so far (including my own) and because this is a complex layout with plenty of layers, things have shifted around.

If you know of any hacks or additions to my style sheet that I can add, or maybe a javascript detect, I'd really appreciate the help.

geof

[abbey]

Yes, IE5 Mac does o.k. but the list of bugs can be very frustrating. Margins are a huge issue and Geof, I was looking for a description of the margin hack that others have developed for IE5 Mac's built-in margins. I don't know if that would take care of the issue, but it might be a start.

The link above also includes a few hacks and work-arounds that may be of help?? I'd look at your page, but I don't have a Mac (which is what ended up biting me big-time about 2-3 weeks ago).

[Bill Posters]

Geof, I took a look at your code and found that the 'problem' is that Camino is handling the <p> tag correctly.
<p> tags carry with them inherent line-breaks. It is these line-breaks that is causing the captions and other texts to be shoved down one line.

You've not gone about using IDs particularly well. Classes alone may have been better for most (if not all) of the caption boxes.


However, even without a rewrite, some minor additions to your .css file and html doc would have the page looking (and being) 'correct' in both browsers.

Add to the end of styles.css:

p.caption,  p.modulestitle, p.modulessubtitle, p.modulestext, p.bodytitle, #bubbletext p {
margin: 0;
}

and place a line break <br /> between the two paragraphs in the bubbletext div.


Using the above css isn't the most graceful way of repairing it. The best way would be to rewrite the code and reconsider your use of ids and classes.

However, if you're feeling lazy, then the above code recommendations should have it looking the same in Camino and the IE versions.

--

There is also one other minor problem that is causing your code to fail validation.

In the 'news text' section:
Remove the <span class="bluetext"> and </span> tags and add the class="bluetext" to the parent <div id="bodytext" class="bluetext">

Then you'll have a sturdy, consistant page that validates as XHTML 1.0 Transitional.

---

Remove the language="JavaScript" from the header <script> tag* and it will validate as XHTML 1.0 Strict.

(*And of course, change to a XHTML 1.0 Strict DTD.)

[Geof Harries]

Bill,

Thanks man, it worked! Your insight and technical suggestions were most appreciated.

geof

[vischo]

A List Apart also has an excellent "style switcher" script. Search for it on their site.

[vgarcia]

A List Apart also has an excellent "style switcher" script. Search for it on their site.

http://www.alistapart.com/stories/alternate/

I've been using it and have found it to be pretty good. However, the styleswitcher.js file they let you download only works on linked style sheets, and won't change anything that has been @imported. You'll have to do that kind of hacking yourself if you want that functionality.

[Geof Harries]

I was under the impression that the ALA Style Switcher script was more about letting the user switch the style on the fly via a series of links. For instance, on Zeldman's site you can either view the design in white or orange. If this is its' purpose, then that's not what I'm looking for.

I was hoping to get my hands on a script that sniffed for the user's browser/user agent and switched the client's stylesheet so that it would render correctly in both IE and Gecko based-browsers. With Bill's help (above) it was determined that I all needed to do was just rewrite elements of my style sheet, and it would display perfectly. Sometimes the best solution is right in front of you

Thanks anyways for your help,

geof

[vgarcia]

You are right Geof. It works very well for switching between predetermined style. I use it for my site to switch between a white/blue/gray layout to a black/white layout. However, it does no browser sniffing.

I also second Bill's suggestions as a good CSS-only way of doing things. Once you get deep enough into CSS and understand it better, you'll see that a lot of browser detection can be avoided because you will have a good understanding of what works and doesn't work in each browser. For example, once you start using CSS2 you pretty much know that you're ignoring IE (for the moment at least); however, as long as your CSS2 is not absolutely essential to the site's design (think of it as "extra goodies"), your design will degrade very nicely.

Anyway, that's my piece. I know it's a bit long-winded, but basically all I'm saying is keep working on your CSS and you'll see dramatic improvements in not only your code, but also in the way you think about and write your code.

[Bill Posters]

Vgarcia, why is CSS2 necessarily ignoring MSIE?

Much of the css I use is CSS2 and I've not had to discount IE at all in my coding.
While IE may require a small amount of hacks in specific situations, it's generally a good CSS2-compliant browser.

At least, MSIE5.2Mac is never a problem.
I find it hard to believe that IE5/6Win are so bad that they should be discounted when working with CSS2.

What exactly did you mean?