Forum Moderators: not2easy
Shadows Papa
Then again, that's not an option for someone who has a lot of NN4 visitors. Doesn't sound like you do though...
So should I worry - is the issue mine or his antique browser and system?
The issue is definitely with his browser, the core of which is about 7 years old! But, on the other hand you can't blame anyone for using an old browser if they want. As long as you can afford ignoring it, then you're ok :)
You should, however, always test with recent versions of the most popular browsers:
1) IE 5.5 or 6 (preferably 6)
2) Netscape 6 or 7 (preferably 7)
3) Opera 6
If your site does not look good in any of those - it may be time to readjust your site.
Netscape 4 supports CSS, but only a limited set. Positioning divs just does not work well, for example, because it is only partially supported. There are hacks around this including using @import (which NS4 ignores, but most browsers accept) - have a search on this site for information on that.
Shadows Papa
The above @import rule allows all modern browsers to read and render your pages based on the style sheet(s).
NN4.x does not understand the @import rule so it will be served a page without style sheets. This is where content positioning can be of importance. I've been using the @import command exclusively for over a year now when I decided to stop supporting older browsers.
Last year I used to provide two style sheet calls, one using the @import and one using the link rel method. The link rel method was my NN4.x style sheet and the @import was for all other browsers. This allowed me to present an almost identical site to all visitors.
<link rel="stylesheet" type="text/css" href="http://www.example.com/file.css">
[edited by: pageoneresults at 4:00 pm (utc) on Jan. 12, 2004]
Now the style sheet will only be recognized by browsers that support the @import syntax, namely not NN4 or IE4... It eliminates most of the really buggy crowd :)
<style type="text/css">@import url(http://www.example.com/file.css);</style>
<style type="text/css">@import "http://www.example.com/file.css";</style>
CSS:
.leftcol {
float: left;
width: 53%;
height: auto;
margin: 5px;
padding: 2px;
}
.rightcol {
float: right;
width: 40%;
height: auto;
margin: 5px;
padding: 2px;
border: 1px dashed #4682B4;
background: #D8E4FA;
}
.leftcol1 {
float: left;
width: 59%;
height: auto;
margin: 5px;
padding: 2px;
}
.rightcol1 {
float: right;
width: 34%;
height: auto;
margin: 5px;
padding: 2px;
border: 1px dashed #4682B4;
background: #D8E4FA;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
}
.wrapper {width: 100%;}
.twocol {
width: 45%;
text-align: left;
float: left;
margin: 2px 0 2px 5px;
padding: 0 0 2px 0;
}
.textleft {
width: 95%;
text-align: left;
clear: both;
}
.code {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;
margin-right: 8px;
margin-left: 1px;
}
.clear {clear: both;}
td {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px;}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
margin: 6px;
}
#logo {
text-align: center;
padding-top: 16px;
margin-bottom: 0px;
padding-bottom: 0px;
}
.header {
margin-bottom: 0px;
margin-left: 8px;
margin-right: 8px;
padding-bottom: 0px;
/*background: #ffffff;*/
color: #000000;
}
h1 {
font-FAMILY: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
font-SIZE: 24px;
text-align: center;
font-weight: normal;
font-style: normal;
margin-top: 0px;
margin-bottom: 1px;
padding-top: 0px;
padding-bottom: 0px;
}
h2 {
font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: normal;
text-align: center;
margin-top: 1px;
margin-bottom: 1px;
}
.dashed1, .search {border: 1px dashed #4682B4; padding: 3px;}
/* shadow boxes */
.shadow {
width: 540px;
margin: 4px 8px 12px 2px;
background: #B0C4DE;
}
.inner {
width: 540px;
position: relative;
top: -3px;
left: -4px;
margin-bottom: 2px;
background: #d8e4fa;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
/* end shadow boxes */
HTML:
<body><div class="content">
<div id="logo">
<img src="ourlogo.jpg" alt="" width="524" height="72"></div>
<div class="header">
<h1>Our store</h1>
<h2>more stuff here</h2>
<p class="about">we have lots of stuff</p>
including this stuff</div>
<div class="wrapper"><div class="leftcol1">
<b>Order online -</b> Mail, email and telephone orders are also welcome.
</div>
<div class="rightcol1">
Bus groups welcome, discount details here.<hr>
Stuff available.<br>
If you enjoy our store, please tell a Friend about us</div></div>
<div class="wrapper"><div class="leftcol">
Visit our store to see what's new,
You may post show and event information </div>
<div class="rightcol">Search our site.<br>
stuff goes here<hr>
Sign up for our email news list.
<span class="code"><a href="javascript: openprivacy()">Click for our Privacy Policy</a></span>
</div></div>
Can this be made into two columns or at least nicer for NS 4? I can use two style sheet files if needed, I suppose using your tricks above.
Shadows Papa
I should know better and it's not up to me to push him into "updating every 6 months". He read me the riot act when I let him know that his browser simply couldn't handle CSS.
Netscape 4 went final in June 1997. So its more like updating every six years than every six months! Even a massive company like Microsoft doesn't offer support for such ancient products (Windows 95 for instance).
Getting a new browser will cost him nothing, it will increase his security and privacy, it will probably render pages a lot faster, it will have less bugs and suddenly everything will look a lot prettier.
I cannot understand the mentality of people like this and I am quite happy to put a notice on my sites to the effect of 'Sorry mate but your browser is from the stone age, please update to something from the current millenium.'
Many will disagree but I reckon if someone won't upgrade a browser for free then they are very unlikely to spend money on my site.
By the way, your page looks rubbish on the Prestel browser I have running on my BBC Micro. :)
Make two style sheets, one for NN4.x and the other will be your primary style sheet for all the other browsers that support CSS which are the majority based on recent statistics.
You'll use your link rel tag like this...
<link rel="stylesheet" type="text/css" href="http://www.example.com/eek-nn4.css">
That will be your NN4.x style sheet.
Now, using the @import command like this...
<style type="text/css">@import url(http://www.example.com/file.css);</style>
You'll bring in your main style sheet which is read by newer browsers (5.0+).
The link rel must come before the @import.
Now, open up NN4.x and the latest browser of your choice. While viewing in NN4.x, start changing the attributes in your style sheet. NN4.x has problems with margins, padding and all sorts of other things. If you have any inline styles, they will cause problems with NN4.x.
You'll be reloading for the next couple of hours until you get that NN4.x sheet just right. If the site was structured a certain way to begin with, you may be able to achieve an almost exact match in NN4.x, I know, I've been there and done that. Maintaining two style sheets can be cumbersome but sometimes you may be forced to do so.
I'd take a real close look at the statistics for that site and see if it even warrants support for NN4.x. If its less than 5% on a low volume site, I wouldn't bother. The total page views in NN4.x would be the determining factor.
provide usable, if unstylized, pages in *all* browsers.... So that means, yes, "support" NN4 by using @import at the very least.
No, that means support NN4 with an unstylized page (e.g. no CSS at all).
But personally I wouldn't bother, you have to draw the line somewhere.
I think we're saying the same thing. If you want to optimize for NN4 or whatever, great, but if not make it useable at the very least. @import is an easy fix.
I don't worry about NN4.x anymore.
Same. Only if the client asks for it directly. Unstyled content is what NN4 users deserve imho...
Shadows Papa
If it is a 4.0x version, then that is probably on Windows 3.11 and there is no upgrade path.
If it is somewhere in the 4.5x to 4.80 range, then this is likely running on Windows 95 or later, and an upgrade to Mozilla would work wonders (Stick some more RAM in the computer if it has less than 64MB though).
.
The @import method isn't just one method. There are at least FOUR variations in the syntax that can be used.
These include: with and without the word url, with and without brackets, and with and without quotes around the URL. Some of the combinations are not valid, but most are. There are subtle differences in what they all do in various older browsers. There is a list at the centricle website, and others, with more information on this.
I gave up attempting to give it style. I found changes I made in the file for NS actually still had an effect on the style others saw so I said the heck with it.
Shadows Papa
Oh. Just install Mozilla then, with a custom but minimum install.
I'm using Mozilla 1.2.1 on Win98SE on an old laptop.
Try it with and without each of the following in all combinations:
- the word url
- brackets around the URL itself
- quotes around the URL itself (and if used in combination with brackets then this is done with the quotes inside the brackets).
Different browsers support different versions of this.
