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.
Nonetheless there are some serious issues related to Explorer for Windows in particular (you shouldn't find these with other browsers):
- Box model. Explorer 5 for Windows does not support the W3C box model. Explorer 6 does, but only in Strict mode. The W3C box model defines the
widthof a box as the width the content of this box takes. The traditional box model applieswidthto the borders, padding and content of a box. - Advanced selectors. Explorer for Windows does not support the child selector (
>), the adjacent sibling selector (+) and the attribute selector (p[class]). - Advanced pseudo-classes. Explorer for Windows does not support the
:focusand:first-childpseudo-classes. - Fixed position. Explorer for Windows does not support
position: fixed. - Background attachment. Explorer for Windows does not support the W3C definition of
background-attachment: fixedon elements other than the<body>. - Min and max. Explorer for Windows does not support
min-width,max-width,min-heightormax-height, with the very minor exception of amin-heightdeclaration on<td>'s in tables withtable-layout: fixed(which, in turn, is not supported by any other browser).
The best way to deal with these incompatibilities is to make sure that the correct layout of your page doesn't depend on them. If you use these problematical selectors and declarations not for fundamental CSS declarations but only for nice extras, you can ignore Explorer for Windows' incompatibilities.
For instance, the :focus pseudo-class allows you to define a style for a focused form field. Although this extra style is nice to have, your page can do without it. Therefore you can safely use :focus and ignore Explorer Windows' lack of support.
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.