|Common CSS Mistakes and Misconceptions|
What are they?
Common CSS Mistakes and Misconceptions
Well, we had lot's of fun and ended up with a cracking thread with the CSS FAQ [webmasterworld.com] So, let's see if we can do the same here. I'll start:
Designing in IE First and Tweaking Afterwards
Most of your sites visitors will be using IE right? So, it's understandable that you might design in IE then try to 'tweak' it for other browsers.
Try it the other way around: Start in Opera or Mozilla and then tweak for IE. It's waaaay easier.
IE get's CSS so horribly wrong, and is so over forgiving that doing it the other way around can be a nightmare. It's far easier to design in a more compliant browser first.
Relying on 'Fixed' Font Sizes
If you choose to use a fixed font unit like px or pt then you could be in for a nasty shock the first time you try out your page in a compliant browser like Opera.
Of course not relying on fixed font units is the way forward but if you must use them then test often in other browsers to allow for users that can change those fixed sizes.
There's nothing more heartbreaking than having someone email you a screenshot of your page, utterly broken!
A table based layout is easier than a CSS based layout
A common misconception, as many people (myself includind) have found out! Changing to a fluid, layer-based layout requires a basic knowledge of the fundamentals of CSS, and once you have that you are away on a hack (the box model version of this is what we all try to avoid!).
The long-term advatages of a CSS layout far outweigh the inital short-term difficulties many experience when first starting down this route. These include: Clean, lightweight code
Faster rendering pages
A Spider friendly page (you can put your content slap, bang underneath your <body> tag!)
Easy to create printer friendly versions of your pages (just create a print media sheet!)
Fluid design is far more usable (backed up by research here [psychology.wichita.edu])
Standards Compliant (Tables are for tabular data)
It's important to remember that tables were used as a layout tool before the advent of CSS. Now that CSS allows us to this, tables should return to their rightful place as the holders of tabular data!
Nick, that's so true...
I only changed to using NN7 as my default in the last month (hey at least I got there!) and with all the help and facts picked up here at WW I've just built a site for a client and I deliberately didn't open IE until the design stages were complete...Yippee! only one error and that was to specify a width
If I'd have done that the other way around as I have done in the past it would've taken much longer to get the design compatible
I'll try to think of something more constructive to add, but thought I'd re-inforce this point as It's so valuable..
Blobfisk, I agree with you also, but that's been harder I'm from a logical accountancy background so tables were a piece of cake.. this CSS learning curve has been worth it for all the points you mention, but sometimes that bad thought comes back ;) I have one table on this new site but it's for a list of products = tabular data!
Treat CSS with an "all or nothing" mentality
HTML isn't bad. Tables aren't bad. CSS is not meant to replace HTML or tables. If you want to display tabular data, use a table! If you want to make a single word bold, use the <b> or <strong> tags. Don't bloat your code with <span class="b"> tags which are all styled font-weight:bold.
In a CSS dictionary, perfection is not equal to "pixel perfection" or "100% cross-browser-look". Perfection simply means "ability to render".
Don't try to use CSS to create pixel perfect pages. It was never meant for that purpose! Neither was it meant to make pages look exactly the same in all browsers.
CSS should be used to make the content renderable in all browsers. CSS allows fluid designs that are easier to update and maintain. HTML never did...
Do you realize how many books look different depending on the publisher? Does that mean that one publisher is better than the other? Not necessarily. Hence, if your page looks different in NN7 than it does in Opera or IE - as long as it's accessible you have reached your goal!
Trying to control the browser environment
If you're looking for absolute control, then you should consider Flash. CSS is not a set of rules for how your page should be rendered. CSS is a set of guidelines. It is then up to each browser to render your page any way it wants within the guidelines you give.
If a page therefore gets "messed up" in a compliant browser (such as NN6+, Mozilla, Opera) it is not the browser's fault - it is your fault. Allow for a few pixels difference here and there. Allow for browser differences.
The lanes on the freeway are there as guidelines for us as drivers. We are allowed to go back and forth between the boundaries. Everything works so much better if we all try to stay in the middle of our lane, but it still works as long as we stay in our lane. It's the same way with browsers and Web pages! Do you realize how difficult everything would be if the boundaries were stricter? It would be impossible to create both a browser and Web page that stayed within those boundaries. Hence, the inconsitences may not always be what we want - but it was simply the best solution.
Fixed Font Sizes:
pt is a print standard, not a digital media standard, and so should not be used when designing a website.
px - is completely correct. The problem is the web browsers which do not resize fonts when asked. Coding using px is totally acceptable. It would be nice if the browser programmers got their act together to realise this.
Mozilla renders fonts styled using px perfectly when you adjust text size. see <zeldman's little rant [zeldman.com] for a good example of why the browser is wrong, and px is right.