Wednesday, February 26, 2003

Netscape 4 Revisited

I hope this is the last post on this subject! I felt the need to look at this again because the redirecting of Netscape 4 users just wasn’t working properly on this site. There are some browsers out there that seemed to be fooling the browser switcher javascript. In any case it didn’t seem very polite to send Netscape 4 users off to another site so I have looked again at other ways.

Fortunately, I have a copy of Eric Meyers’s excellent book - Cascading Stylesheets - O’Reilly—and I came across a suggested way of giving Netscape users an alternative stylesheet. It turns out that you can link an external stylesheet by two methods: using link or using @import. Netscape 4.xx doesn’t recognise the latter so by using both methods you can fool Netscape 4 into using the former!

furthermore...

Here are the details You will need two stylesheet files. Call them what you like but start with the one that you know works in your modern browsers. It can have 9px fonts even! Lets say that called goodbrowsers.css. Duplicate it when you have it working the way you want, then rename the new one something like forn4.css. Edit the forn4.css and make changes to some of the classes and even remove those that won't work in Netscape 4.xx. I'll come on to some differences that you may wish to invoke later. Now in the head section of the file that uses the stylesheet you need the following:<!-- first we link the stylesheet that Netscape 4 will deal with --> <link href="css/forn4.css" rel="stylesheet" media="screen"> <!-- then we import the stylesheet that Netscape 4 won't deal with --> <style type="text/css" media="screen"> @import "goodbrowsers.css"; </style> There are some important points to make about this and some of them are NOT mentioned by Eric Meyer. These 2 methods of linking to the stylsheet are both recognised by the modern browsers so the second one "goodbrowsers.css" will replace the first "forn4.css", so make sure you have ALL that you need in the goodbrowser stylsheet. That is why I suggest getting the good one right first and then duplicating. Another important, but mysterious point is that the @import function seems a bit 'slippy' in its implementation across different browsers: here are some different foms that it might take:@import "goodbrowsers.css"; <!-- as above --> @import url("goodbrowsers.css"); <!-- note the url --> @import url(goodbrowsers.css); <!-- note no quotes --> @import url(http://www.pagetoscreen.net/goodbrowsers.css); <!-- note the full url --> Different browsers will recognise each of these. For a better explanation of this please visit Pulsating Brain Also [very IMPORTANT!] - for IE4 and above the stylesheet for the @import method NEEDS to be IN THE SAME FOLDER as the HTML file that is using it. So what would (or could) be different in each stylesheet. Well first you should try to get good evidence that this is working. This is what I did: A little known and used style is 'display' and with - display: none{} you can hide something. So - set up a class like this: .showhidemessage { display: none; } this will be in 'goodbrowsers.css' then in the stylesheet: 'fornet4.css' we put: .showhidemessage { display: block; } then in your HTML page put this somewhere: <span class="showhidemessage">Netscape 4 should be updated</span>Someone with Netscape 4.xx should see this message 'other' will not. This will work if the @import feature has worked properly.Why should I do this at all?There are some things that Netscape 4.xx just won't do properly. For example it won't display text properly with a font size of 9px in the stylesheet, change to 10px. Netscape 4.xx won't render css borders properly so you'll need to do it another way. PageToScreen now uses some backgound greys to divide the page up. This is achieved like this: In the 'goodbrowsers.css" file: .slabforn4 { background-color: transparent; border-right: 1px solid silver; border-bottom: 1px solid silver; } In the 'forn4.css' file: .slabforn4 { background-color: white; border-right: none; border-bottom: none; }Another PointIf the quality of your design depends on getting your content up in the top left of the browser window then you will notice a problem within Netscape 4.xx. Even with: <BODY leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> you will see a space top and left between your content and the edge of the browser window. You can modify the body class within your 'fornet4.css' stylesheet like this:body { margin: -10px 0px 0px -10px; }This will solve the problem for Netscape 4.xx browsers, however, you must now modify your 'goodbrowsers.css' stylesheet to include the following:body { margin: 0px 0px 0px 0px; }This will setup modern browsers to work correctly. I hope this works. I'll be testing on a few other browsers. Let me know.