Making Sound CSS

Considering the browser situation

[brotherhood of LAN]

CSS is something that was nudged in my direction by coming here to WW :) Since then, any decrease in code on the page is much appreciated from this fact.

I'm not a "fan" of it, but I like to use it wherever possible to cut down the code needed and to make everything that little bit faster where possible.

I use Topstyle which is great, as it lists all the attributes i could ever use and the correct syntax for them. Syntax or learning new CSS would never be much of a problem.

I'm sitting here with a copy of IE6 and usually make the CSS and preview it on this browser. I've never got round to getting a hold of netscape, and somehow I keep trashing Opera by formatting drives or using another computer ;)

I've read a few CSS threads and it seems that much of the problem is NN4

I don't know the scale of the difference between different browsers and how they render CSS.

Is there a 1001 "quirks" that I should know about when using CSS, or is it a case of one problem browser and a quirk here and there on the different browsers?

I've been taught by the school of "accessible design" here at WW so I'm not up for saying "stuff the browsers design for IE" or something to that extent :)

So is designing for cross-browser accessibility a huge problem, or are the quirks few and far between?

[stever]

BoL,

You're right, one of the main problem browsers is NN4 and, if you do make the decision to support users, you really need to get a copy of a 4 version on your computer. (Try the browser archive at evolt.)

Start off simple and test in various browsers as you go (I use NN4.7, Opera 5.12 and IE5.5 - all for PC). Normally if you get it right for them it should be OK in the newer ones (although some of the later Mozilla ones have some funky behaviours and IE5.5Mac does odd things sometimes).

Most people settle for a degradeable (i.e. readable but not that pretty) version for NN4. Otherwise you can go the specialised style sheet for different browsers route.

You will see a lot of CSS angels dancing on heads of pins and hacking to enable a certain feature to be used in the "correct" manner - but basically the simpler you keep the CSS, the more likely you are to be able to design cross-browser.

In answer to your NN4 query, problems with NN4 as opposed to other models are the use of padding and margins (it counts up differently); not being able to declare a "global" font type; 100% wide designs; and cell backgrounds in tables.

[WibbleWobble]

As I recall, NS4 also doesn't read the closing of classes properly, in a rather hit-and-miss way. So you may find css attributes scattered where they shouldn't be.

Its volatile, and that's that.

[madcat]

a quirk here and there on the different browsers?

Not one browser is free of problem children. Nothing that can't be beat down with some imagination- well, some things just don't work. but, check out Style Sheets Guide [webreview.com], Box Lessons [thenoodleincident.com] and CSS Pointers Group [css.nu] for further workarounds.