Uncle Jim's CSS-P Tutorials: CSS Compatability Issues

Article five of a series by Jim Stiles.

NOTE: Readers should already be familiar with basic style sheet properties and functions.

Cross-Browser Compatability Issues

You will most likely encounter problems when applying your CSS, if not in one browser, then in another. Before trying to fix the cross-browser CSS compatibility issues, you should first validate your style sheet. If it passes validation, you can then sure the problem isn't caused by incorrect code but by incorrect browser implementations. Nonetheless, there are some well-known issues related to Windows Explorer in particular (you shouldn't find these with other browsers):

* Box model. Internet Explorer 5 does not support the W3C box model. Explorer 6 does, but only in Strict mode. The W3C box model defines the width of a box as the width the content of this box takes. The traditional box model applies width to the borders, padding and content of a box.

* Advanced selectors. Windows Explorer does not support the child selector (>), the adjacent sibling selector (+) and the attribute selector (p[class]).

* Advanced pseudo-classes. Windows Explorer does not support the :focus and :first-child pseudo-classes.

* Fixed position. Windows Explorer does not support position: fixed.

* Background attachment. Windows Explorer does not support the W3C definition of background-attachment: fixed on elements other than the .

* Min and max. Windows Explorer does not support min-width, max-width, min-height or max-height, with the very minor exception of a min-height declaration on 's in tables with table-layout: fixed (which, in turn, is not supported by any other browser).

The best way to deal with these incompatibilities is to ensure the correct layout of your page is not solely dependant on them. If you use these only for enhancement, you can ignore Windows Explorer's incompatibilities.

For example, the :focus pseudo-class allows you to define a style for a focused form field. Though this additional style is nice to use occassionally, you can do without it. Instead, you can safely use :focus and ignore Windows Explorer's 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;
}
This gives the page body a maximum width, so your text will remain within the readable area of the page, even on larger screen resolutions. Although Windows Explorer does not support max-width, users can opt to resize the window the text is too wide for the viewing screen.

The lack of support for advanced selectors can be a nuisance. Nonetheless you can evade incompatibilities by using these selectors for supplemental styles only. This way, Windows Explorer will display the basic page, even though it doesn't show some of the more advanced styles.

A more serious compatability problem lies with position: fixed. There is CSS solution to this problem. However, when you use this method, you cannot use position: absolute normally. Therefore, this method is not advised.

Basic Page setup using tables:

This is a basic table setup is most commonly used for the block-type page. It contains header, left navigation, right content and footer cells.

<table>
<tr>
<td colspan="2">
<div class="header">Header</div>
</td>
</tr>
<tr>
<td>
<div class="navigation">Navigation</div>
</td>
<td>
<div class="content">Content</div>
</td>
</tr>
<tr>
<td colspan="2" style="vertical-align: bottom">
<div class="footer">Footer</div>
</td>
</tr>
</table>

Replacing the use of certain tags

1. FONT tag

You no longer need to use the <FONT> tag. Instead, use:
body {
font: 0.8em verdana,sans-serif;
}
NOTE: There are some conflicting problems when using font sizes in table cells.
For consistency, you should extend this declaration to all common text containers.
body,td,li,p {
font: 0.8em verdana,sans-serif;
}

2. CENTER tag

You should also refrain from using the <CENTER> tag. CSS should now be used for centering text and blocks of content. To center the text in div.text you do the following:

div.text {
text-align: center;
}
Centering entire blocks is a bit more complicated. If you want to center the entire div.text, use the following:

div.text {
margin-left: auto;
margin-right: auto;
}
NOTE: (auto means: “as much as you need.” The <div> takes as much margin as it needs and equally divides it between left and right. As a result it is centered).

The auto value does not work in Windows Explorer, so you need to use text-align on a block containing div.text:

div.container {
text-align: center;
}

div.text {
margin-left: auto;
margin-right: auto;
text-align: left; /* overrule inheritance */
}

The use of text-align is not standards-compatible as of yet, but it's the only way to make Windows Explorer display this correctly.

Accessibility

When you've created and validated the entire file, you should perform an accessibility check. To do this, remove all style sheets and JavaScript from the file look at the page unstyled. The content should still be in a logical order and all navigation should display properly.

Next, I will show you some examples of how this stuff actually looks.

<<< Previous | HOME | Next >>>