How many different stylesheets for different browsers?

[myatia]

I've started to write different stylesheets for different browsers to optimize the way my pages look in each. Currently, I'm writing one for IE5+, one for NN6+, and then another one that I just use as a catch-all. What I'm wondering is if there's any rule of thumb as to how many I should be writing and how to group different browsers into one stylesheet (e.g., one group has NN4.5 and 4.7, one has IE5 and IE5.5, etc.). If anyone has any suggestions, I'd love to hear them.

Thanks,

Misty

 

[cian]

Hi,

In my opinion you need 1!
I also have given up support for all V4 browsers.

But you could make one for V4 browsers, another one for IE5x PC cos it's crap and misimplements the box model, thats IF you use CSS for layout. You could use one for Mac's etc etc
It's easy to go overboard.

Just my own opinion.


::

http://www.endamcg.com

 

[myatia]

Yeah, that's what I'm worried about (going overboard with stylesheets, I mean). I know this is about the most general question I can ask, but what process should I go through for designing pages to look good in different browsers? Right now, I just sit with many different browsers open, and each time I change the code, I reload the page in each one. Is there a better way to do things than this? Should I start designing for just one browser, and then go back and try and fix the others? There's gotta be some method to this madness.


Misty

 

[TenTonJim]

here is a link to an example of how to overcome the box model problem in IE...

http://www.tantek.com/CSS/Examples/boxmodelhack.html

also, I have found that by declaring your doctype and then checking it for validity, a lot of the IE vs NS6+ problems went away.

I would suggest a global.css as a linked CSS and keep it simple for the older browsers (if you must). Use your more sophisticated layout CSS in an @import style sheet because the older browsers will ignore that anyway.

personally I would agree with cian... just use 1 and forget about the 4.x browsers. The longer we make paqes accessible to the pixel (looking pretty) in those browsers, the longer they will be around. By coding using straight heirarchical structured html and divs you can achieve a layout that looks godawful plain in older browsers (yet still readable, accessible, compliant) and that looks great in the new ones.

Good luck, no trivial task.

Thanks,
JimS. JimS.
aka
TenTonJim

Looking for work

http://tentonweb.com/resume/resume.asp

 

[cian]

A couple of things Jim mentioned I would definitly advise.

The way you are doing it is fine, IMO, update your page and check it in each browser. Instead of designing for seperate browsers view your page in each browser and try to allow as much flexibility as possible so it looks ok in each browser.
It does not need to look exactly the same or totally perfect in each browser, just acceptable.

Make sure you have a correct DTD, i'm amazed at the amount of websites with NO DTD. Use HTML Tidy and the W3C validator to clean and validate your code, including your CSS!

Forget about V4's!!

Jim also made a good suggestion, a simple CSS for old crap browsers and your optimised CSS using the @import rule.
I have not bothered with this personally but it is recommended.



::

http://www.endamcg.com

 

[areznik]

Check out this article, it helped me a lot :

http://www.ericmeyeroncss.com/bonus/trick-hide.html

it has some good points and tricks

Alex