Compatibility problems on site with CSS

[Anthony Williams]

Hi,

I just updated the Ashwater website at http://www.ashwaterparish.org.uk to use
CSS rather than frames/tables for layout.

It works fine in NS7.1, Mozilla Firebird 0.6, IE6, Opera 5 and Opera 7 (all on
Windows XP), and looks passable in Lynx, but there are problems with NS6.2 and
NS4.7.

In Netscape 6.2, there are *two* right-hand scroll-bars, and you have to scroll
both of them to get to see the bottom of the content. How can I avoid this?

In Netscape 4.7, the UL menu appears _almost_ like a standard UL, except the
formatting is wrong, and the A elements are not clickable. Is there a solution,
or will I have to add a hack to make NS4.7 ignore the CSS?

Finally, the top image on http://www.ashwaterparish.org.uk/village/ is designed
to auto-resize with the frame. This is currently achieved by using width="100%",
but this means the height cannot be specified. Is there a way to achieve this
effect whilst specifying the height, so that browsers can layout the page
correctly before the image is downloaded?

Thanks,

Anthony

[Anthony Williams]

Brian <us*****@mangym utt.com.invalid-remove-this-part> writes:

Anthony Williams wrote:

I just updated the Ashwater website at
http://www.ashwaterparish.org.uk to use CSS rather than
frames/tables for layout.
It works fine in NS7.1, Mozilla Firebird 0.6, IE6, Opera 5 and
Opera 7 (all on Windows XP), and looks passable in Lynx, but there
are problems with NS6.2 and NS4.7.
In Netscape 6.2, there are *two* right-hand scroll-bars, and you
have to scroll both of them to get to see the bottom of the
content. How can I avoid this?

DIV.content
{
overflow: auto;
}

Why do you have this declaration? I can't be certain of what you want
to achieve with it, but that will create scrollbars as needed.

I can't remember precisely. However, the current CSS was obtained through lots
of experimentation trying to get consistent behaviour wrt scrolling across all
the above browsers. I think this was needed for Opera --- if it was IE, I would
have put it in the IE-only comment block.

Are you suggesting that removing this should make the page work correctly in
NS6.2?

BTW, I would be grateful if someone with IE5.x could check the display.

In Netscape 4.7, the UL menu appears _almost_ like a standard UL,
except the formatting is wrong, and the A elements are not
clickable. Is there a solution, or will I have to add a hack to
make NS4.7 ignore the CSS?

I'd advise that you hide all css from NS4.x. It's much easier that
way, and NS 4.x users still get access to the content of the site. If
you are willing to put in extra work for them, hide only those styles
that NS 4 can't handle.

Most (90%+) of the visitors to the site use IE according to the logs, so my
concern about NS4 is merely personal --- I don't want to alienate anyone just
because they're using an old browser --- so I think I'll go for the "hide all
the CSS" option. Is it as simple as using @import, or am I misremembering?

the top image on http://www.ashwaterparish.org.uk/village/ is
designed to auto-resize with the frame.

You mean window, not frame, right?

Yes.

This is currently achieved by using width="100%", but this means the height
cannot be specified. Is there a way to achieve this effect whilst specifying
the height, so that browsers can layout the page correctly before the image
is downloaded?

Best not to have browsers resize images, as the results can be less
than pretty. Just put it in at its original size, and flow text
around it.

I see your point --- browsers aren't designed for manipulating images.

I do kinda like the auto-resizing of the image, as it means that people with
narrow screens don't have a sideways scrollbar just because of the image, whilst
people with large screens get a reasonably-sized image.

However, it may be better to do that than force browsers to redo the layout when
they know the final image size.

Thanks for your comments,

Anthony

[Michael Fesser]

Anthony Williams wrote:

BTW, I would be grateful if someone with IE5.x could check the display.
Tested with IE5 (W2k), little problems with the navigation list:
http://www.mfesser.de/temp/parish.gif (65K)

Try to avoid line breaks between </li> and <li>, e.g.

<ul class='top'><li >
<a href="/parish/">The Parish</a></li><li>
<a href="/village/">The Village</a></li><li>
....

In Mozilla 1.4b this list is not scrollable, i.e. in a small window
the bottom links are not reachable.

And this might be interesting too:

Don't use "click here" as link text
http://www.w3.org/2001/06tips/noClickHere
Most (90%+) of the visitors to the site use IE according to the logs, so my
concern about NS4 is merely personal --- I don't want to alienate anyone just
because they're using an old browser --- so I think I'll go for the "hide all
the CSS" option. Is it as simple as using @import, or am I misremembering?

@import or @media, NS4 doesn't recognize them.
The media attribute in the link element works as well.

Micha