CSS and older browsers

[arthurk]

I've decided to grasp the nettle and change over to a CSS-based site, but I'm a bit concerned about older browsers. Rather than using tables for layout, as I used to, I'm now starting to use layers with <DIV> tags, which gives much more precise control over the placement of text etc. However, I had someone check a page with an old version of Netscape (4.6, I think), and in the screenshot they sent me it looked awful, with some layers rendered on top of others.

Is this kind of thing inevitable with CSS, or can it be fixed? Or would making the site compatible with older browsers mean ditching CSS altogether?

Thanks for any help,
Arthur

PS - The page which I had checked is my site's homepage - URL in signature below. However, the Rootsweb freepages server is having problems at present, and last time I looked was displaying an earlier version of the page. The last one I uploaded has the date 26 October, and is slightly different to the earlier one, though the basic layer structure is the same.

[Mandie]

You can organise your CSS in such a way that you should be able to have a readable site that works on all browsers. You have a basic stylesheet and then you can import another stylesheet which will work in modern browsers.

Eventually you have to draw a line somewhere with which browsers you can support. Switching to a seperate CSS means you make things a lot easier for people to read the site if they use a screen reader, because they only get the content and not a load of <font> tags etc. Plus your page sizes will go down too. :)

People really should upgrade browsers regularly, if only for the security patches. This can be done via a download or they can request a CD (if on dial-up).

Your site looks good in Firefox 1.0.7. Well done!

[arthurk]

Thanks for the reply and the links, which help to clarify some things for me. (And thanks for the compliment on the site!) However, I'm not sure that the links quite deal with my problem, but as it's near the limits of my understanding, maybe I didn't explain it very well first time round.

The problem isn't so much about style as layout, and the way my pages are set out with layers using <DIV> tags. Unfortunately Netscape 4.x doesn't recognise these properly, which is apparently why the various blocks of text are overwriting each other. I can understand what the links say about having the styles linked to in such a way that Netscape will ignore them, so now I'm wondering, would it be possible to define these blocks' position on the page somewhere other than in the <DIV> tags?

However, it's all feeling a bit overwhelming at present, and I'm wondering if there are enough people still using the older versions of Netscape to make it necessary to do this kind of thing.

Arthur

[Peter Goodey]

You may find some hints on this page

http://www.webmasterworld.com/forum83/133-2-10.htm

It's a very old discussion and much of it can be ignored but it may give you some ideas about another search.

[Patrisia]

....and no, I don't mean any of us!

Following on from Arthur's posting re older browsers and CSS; I don't use CSS but I have had problems writing the HTML code so that it can be viewed by all kinds of browsers.


......... and I'm wondering if there are enough people still using the older versions of Netscape to make it necessary to do this kind of thing. ArthurDoes anyone have any idea what might be the scale of useage of the older browsers?
A 'reliable source' reminds me that "many people, especially older folks involved in family history rather than smart "latest and greatest" whizz-kids, are still living in the past as far as their browser is concerned!"

It would be useful to know if there is some happy medium, that wouldn't upset too may people, without having to go to great lengths to accomodate what might be a very small minority.

I'm ready to be shot down in flames for even suggesting it! ;)

[johnpritt]

Have you looked on the Mozilla.org site about identifying the browser being used? Try looking here: http://www.mozilla.org/docs/web-developer/upgrade_2.html#DevCrossBrowser

I also found this site for statistics: http://www.upsdell.com/BrowserNews/stat.htm
or this one
http://www.doctor-html.com/agent_stats/

Have fun, and please don't forget us Macintosh users.

[arthurk]

Thanks for the ideas and links. (Note to Peter: I couldn't get to the one you gave as it seemed to be a subscription-only site.) My gut feeling is a bit like Patrisia's - that genealogists are rather more likely than average to be using older browsers, so I don't want to alienate too many of them. Having said that, the statistics I've seen suggest that Netscape 4.x usage is under 1% of all browsers, and in some cases under 0.1%.

I don't know very much about Mac browser compatibility, but I'm taking care to validate all my new pages to HTML 4.01 standards, if that's any reassurance.

If I understood it correctly, one of the links suggested some code which would determine which browser was being used, leading to different coding according to what it found. However, that's all getting far too complicated for me, and I'd really like to keep things as simple as possible.

So what I think it comes down to for me is this: I know <DIV> tags are correct HTML and help to make my pages appear exactly the way I want them in a modern browser, but in Netscape 4.x it just looks a mess, with elements appearing on top of each other. So, would it be preferable to use tables for the basic layout so that I can keep the different elements separate from each other and stop them overwriting, and rely on style sheets just for the visual appearance (fonts, colour etc)?

Sorry if I'm getting repetitive, but I'm trying to feel my way towards the best way of doing things before I get too far with the redesign.

Arthur

[johnpritt]

I think I was a bit economical in my reply...what I should have added is that once you can identify the version of the browser being used (and also the operating system), from your first page for example, then you can redirect the browser to the appropriate sections of your site to ensure (as ) complete support (as you feel like providing).

Thus, your fist page might simply say something along the lines of "Hello, please wait while you are redirected..."

Early browsers are directed to a non-frames, non-CSS section, other browsers towards another seciton, and so on.

Of course, you are complicating life for yourself, but the end result should be worth it :)

[johnpritt]

Oops, our posts crossed!

I guess you have to ask yourself who your "customers" are. If you're publishing the data for the world at large, and reckon that almost anyone can find your site (does a Google search find it?, for example) then you need to cater for early and later versions of the browsers.

On the other hand, if it's mainly directed at a restricted number of users (for example, your family) then it should be relatively easy to figure out what they use, and then you just aim to please them.

As for mac compatibility, most mac browsers support the generic standards, so you should be OK.

The only problem I can see on your site (and this as just a cursory glance) is that your titles on the home page and the index of names page overlap the "discover interesting facts" search boxes. This was the case when I looked from work (Windows/IE Explorer) and now from home (Mac OSX/Safari). Note that this is the version dated 19 October.

[arthurk]

Thanks for the further thoughts, John. I think I've answered the part about having alternative versions - it's taking me so long to get one version done that I dread to think what two would take! (And personally I dislike the "wait while you are redirected" kind of page - I much prefer to go straight to where I'm aiming at.)


I guess you have to ask yourself who your "customers" are. If you're publishing the data for the world at large, and reckon that almost anyone can find your site (does a Google search find it?, for example) then you need to cater for early and later versions of the browsers.This is what I'm hoping for.

The only problem I can see on your site (and this as just a cursory glance) is that your titles on the home page and the index of names page overlap the "discover interesting facts" search boxes. This was the case when I looked from work (Windows/IE Explorer) and now from home (Mac OSX/Safari). Note that this is the version dated 19 October.That's strange - I have no problem at all in IE (6.0 and 5.5 (or is it 5.0?)). Which version do you have? It sounds similar to the way it was displaying in Netscape 4.x. But if this kind of thing is liable to happen, it does make me wonder if it would be safer to use tables for layout, rather than <DIV> with absolute positioning.

Thanks again,
Arthur

[johnpritt]

Hi Arthur,
I've just checked again from work (Windows2000, IE 6.0.2800.1106) and it is still as I described.
Note that it's only those two pages -- the other pages are correct -- but they do appear to be the only ones using <DIV>. Without my HTML books next to me, I'm useless at debugging, so I can't help more, sorry!

[Mark]

I think the problem is that your absolute positioning (which is fine by itself) is conflicting with Rootweb's inserted advertising/banner/searchform at the top of the page.

So maybe you need to absolutely position a bit lower down the page.

Mark

[arthurk]

Thanks for the ideas:


I've just checked again from work (Windows2000, IE 6.0.2800.1106) and it is still as I described. Note that it's only those two pages -- the other pages are correct -- but they do appear to be the only ones using <DIV>.I haven't upgraded very much of the site yet, so those may well be the only pages you'll find with <DIV> tags. Actually there should probably be a few more, but with Rootsweb's current server problems it seems that pages uploaded last week aren't available.


I think the problem is that your absolute positioning (which is fine by itself) is conflicting with Rootweb's inserted advertising/banner/searchform at the top of the page. So maybe you need to absolutely position a bit lower down the page.Thanks for that idea - obviously when I look at the pages on my computer I don't see the ads, and as a rule I use ad-blocking so don't see them online either. This was something that hadn't occurred to me.

Anyway, in view of what you've all said, I guess I will now revert to tables for the outline structure, and just use CSS for styling. In fact, looking at one of my books again, this is what they suggest too. Why didn't I read it first??

Thanks again,
Arthur

[Blain]

I guess I will now revert to tables for the outline structure, and just use CSS for styling. In fact, looking at one of my books again, this is what they suggest too. Why didn't I read it first??

Thanks again,
Arthur

Arthur, if that really is what your book says, can I give you one recommendation, throw the book away.

Tables are for displaying tabular data, not for layout.

The main stumbling blocks when starting to use CSS is to put everything in DIV's and absolutely position everything.

This is wrong.

The first step is to use semantic HTML;use the tag correctly.

for example

H1 = The first heading on you page, ie your title
H2, H3, H4 etc = second heading should be h2, third h3 etc.
Only paragraphs should use the P tag
If you are compiling a list use list tags, if it's an ordered list use OL, if it's unordered use UL.

If you use semantic HTML your document will make sense, whether the user is using IE3, Firefox, Netscape or a braille reader.

Your CSS is then used to make the site look pretty.

[arthurk]

Arthur, if that really is what your book says, can I give you one recommendation, throw the book away. Tables are for displaying tabular data, not for layout.
Strictly speaking, yes - but because of the shortcomings of earlier versions of HTML they have become very commonly used, and they are also well supported by browsers.


The main stumbling blocks when starting to use CSS is to put everything in DIV's and absolutely position everything. This is wrong.
I'm not entirely sure why this is wrong in the absolute sense which you seem to be implying. In my case it didn't work because (a) older versions of Netscape mess it up, and (b) the absolute positioning was conflicting with Rootsweb's adverts.

In order to get blocks of text neatly positioned on my home page (the 4 panels relating to my grandparents), if I wasn't going to use <DIV> tags I couldn't see any way other than tables to achieve this.


The first step is to use semantic HTML;use the tag correctly.
for example
H1 = The first heading on you page, ie your title
H2, H3, H4 etc = second heading should be h2, third h3 etc.
Only paragraphs should use the P tag
My reason for not using the H1, H2 etc tags was that I preferred to use class names which were a bit more explicit as to what they represented.

I don't have such a browser, so couldn't see this. One comment, though: I see from your style sheet that alternate rows of your census tables are intended to be a different colour - I think from the hex code that this may be a kind of off-white - but on my TFT screen, I couldn't see any difference at all.

Anyway, thanks for your comments. However, I'm not going to be able to keep up with this thread for a while, as we're moving house soon, and life is hectic.

Arthur

[Glyndwr]

It's commendable that you should want everyone to access your site but I think that you shouldn't be too concerned about very old browsers. This is the latest breakdown for my community website :

MSIE 6 * 879 - 70.83%
AOL 9 * 149 - 12.01%
Opera 9 * 86 - 6.93%
Firefox 1.5 * 31 - 2.50%
MSIE 4 * 26 - 2.10%
MSIE 5 * 20 - 1.61%
Safari * 16 - 1.29%
Firefox 1 * 11 - 0.89%
Mozilla 1 * 6 - 0.48%
Opera 8 * 4 - 0.32%
MSIE 7 * 3 - 0.24%
Other/Unknown *3 - 0.24%
AOL 8 * 2 - 0.16%
AOL 7 * 2 - 0.16%
Netscape 3 * 1 - 0.08%
Netscape 7 * 1 - 0.08%
PDAs * 1 - 0.08%

AS you can see, the vast majority of visitors this month were using pretty up-to-date browsers, with over 90% using the very latest. Your visitors probably follow much the same pattern, so I think it's really more important that you make sure that your site can be accessed by all browsers on all platforms.

Hope this helps.

[arthurk]

Thanks for the figures - I found some fairly similar ones when I was looking into this before. I haven't had chance to do much with the site recently, but I'm still taking care to validate everything before I upload it, so I'm hoping it will work reasonably well for everyone who goes there.

Arthur