What we need to do next is ensure that the site looks good on other 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.
For some reason, Netscape 4's twisted way of displaying CSS does not interfere with and displays the following properly:
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)
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.
|<style type="text/css" media="all">@import url("style.css");</style>|
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
|<link rel="stylesheet" href="oldstyle.css" type="text/css" />|
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.