Liquid CSS Layouts - Design Alternative to Table Based Websites

Step 11 - Cross browser testing of CSS layout

What we need to do next is ensure that the site looks good on other browsers.

Modern browsers

The site was tested and looks perfectly in Mozilla 1.4, Opera 7.11 and Netscape 7.1 (screenshots taken at 800x600). As you can see there is no annoying horizontal scrollbar.

Older browsers

Out of the older browsers we chose Netscape Navigator 4.75 for testing. Everybody knows Netscape 4.x is a designer's worst nightmare. In our case the result pretty much fits the profile - a nightmare. I'm sure many of you have had the same gut feeling when you opened up your site in Netscape 4. We will work with the present version of the site that does not have a Headerbackground box nor left and right margins.

However, we have no right to exclude those using older browsers from accessing the site. We will work on it until the layout becomes Netscae 4 friendly. Although the CSS support is very limited we will give it our best shot.

Important

For some reason, Netscape 4's twisted way of displaying CSS does not interfere with and displays the following properly:

Div boxes margins and paddings
Stack order (e.g z-index)

These are key to CSS layouts and without them our task would be hopeless.

For the same unknown reason, Netscape 4 does not display properly (all the time or some of the time)

The float property
Images in paragraphs
LI and UL lists margins and paddings
Whitespace in source code between images
Background images

These are only some of the oddities of Netscape 4 which we've encountered in our task.

What we will do is let through the CSS references that are supported by Netscape. First of all we will make Netscape ignore the current style sheet completely by using the import command.

Netscape does not support the import command hence it will ignore any reference in that style sheet. We will link the document to another style sheet (specially created for NN4) by using

nn4style.css is a modified version of style.css from which we removed references that confuse Netscape 4. We have removed the float property and some of the background-image properties. Netscape will read nn4style.css while modern browsers will read both. Because the two style sheets are similar, most the references contained will not come into conflict with each other. Should that happen, the imported style sheet will overrule the nn4style.css one.

We have also set some custom negative margins for NN4 in order to achieve our layout and we also eliminated the whitespace between the navigation elements.

This is how the layout looks now in Netscae 4.75:

In text only browsers the main navigation is shifted to the bottom of the page after the content. While this is an obvious drawback, the page still proves to be usable. See how the site looks in Lynx.

Although liquid CSS layouts require a lot of time, effort and above all patience the benefits are numerous and are certainly worth while.

Liquid CSS layouts tutorial structure