You’ll probably encounter issues when you apply your CSS, especially in Explorer for Windows.
Before delving into cross-browser CSS compatibility issues, validate your style sheet. If it passes this test you are sure that the problems aren’t caused by incorrect code but by incorrect browser implementations.
Validation doesn’t remove the problems, though. If you encounter weird behavior, don’t assume you found a bug. Ask for help at the wonderful css-discuss mailing list, where plenty of experts are ready to lend a helping hand.
If you still think you’ve discovered a bug, follow the instructions on the MysteryBug page to isolate and define the bug. Usually you’ll find that you’ve misunderstood an obscure detail in the specs.
A text that spans a full 1200 pixels of screen width is usually unreadable. You can solve this problem by applying max-width:
body {
max-width: 600px;
}Now you’ve given the body a maximum width, so that your text remains readable even on large screen resolutions. Although Explorer for Windows does not support max-width, its users can always resize the window if they think the text is too wide. Therefore this declaration is safe, too.
The lack of support for advanced selectors can be a nuisance. Nonetheless you can evade incompatibilities by only using these selectors for extra styles, not for basic ones. Thus Explorer for Windows will show the basic page, even though it doesn’t show some advanced styles.
Explorer 5′s box model is a more fundamental flaw. You could use the famous Box Model Hack, or you could decide the minor differences aren’t worth the trouble. Fluid thinking can solve many problems, not by hacking your way through browser incompatibilities, but by embracing a different, more web-like way of thinking.
The most serious problem by far is position: fixed. Eric Bednarz has found a pure CSS solution to this problem, but technically it can be tricky. For instance, when you use his fix you cannot use position: absolute normally. Read his page well if you want to implement his solution.
Tables Revisited
Using one minimal table to roughly lay out your page is quite acceptable. Nonetheless, it is important to stress that this minimal table should be one of only 2 or 3 tables, no more. Do not insert more tables than absolutely necessary. They’re not necessary; CSS can do the job for you.
There’s one exception to this rule: you may use tables to display tabular data, for instance stock quotes or long lists of employees with their room numbers and phone numbers. For these bits of data, you can add an extra table to your code.
If you’re not sure if a certain data set requires a table, ask yourself how you’d display it in print. If you’d use a table even in print, the data is tabular.