CSS workaround for IE4 and IE5

Hello everyone,

The following website looks fine on the latest IE5, IE6 and Firefox.
However, in older versions of Internet Explorer, the menu overlaps the
text. Does anyone know why this is, or if there is some sort of a
workaround such that it looks good for all browsers?

Site: http://www.hansstolp.nl/nieuws.php
CSS: http://www.hansstolp.nl/templates/style.css

Thanks for any help!

--
Daan

On Sun, 12 Sep 2004 15:37:33 +0200, Daan <d_stolp (AT) nospamhotmail (DOT) com>
wrote:

The following website looks fine on the latest IE5, IE6 and Firefox.
However, in older versions of Internet Explorer, the menu overlaps the
text. Does anyone know why this is, or if there is some sort of a
workaround such that it looks good for all browsers?

Do you have a special reason for wanting to support IE4? IE versions up
to 4 and Netscape versions up to 4, all put together, make up barely 1%
of most readerships these days, and are decreasing every month.

I would recommend that you simply make sure your pages are readable in
those browsers, without worrying about them looking particularly good.
The simplest way is to hide the CSS from them completely by using
@import.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Stephen Poley wrote:

On Sun, 12 Sep 2004 15:37:33 +0200, Daan <d_stolp (AT) nospamhotmail (DOT) com
wrote:


The following website looks fine on the latest IE5, IE6 and Firefox.
However, in older versions of Internet Explorer, the menu overlaps the
text. Does anyone know why this is, or if there is some sort of a
workaround such that it looks good for all browsers?


Do you have a special reason for wanting to support IE4? IE versions up
to 4 and Netscape versions up to 4, all put together, make up barely 1%
of most readerships these days, and are decreasing every month.

I would recommend that you simply make sure your pages are readable in
those browsers, without worrying about them looking particularly good.
The simplest way is to hide the CSS from them completely by using
@import.

Well, if IE4 is not supported, I can live with that. But since my uncle
(who I made this site for), uses an older version of IE5 (I think
IE5.01), I want the site to look good in that version, as well as the
newer browsers. I've seen some hacks for different browser versions in
sample CSS codes before, but I wouldn't know how to implement which hack
in this case.

--
Daan

On Mon, 13 Sep 2004 14:37:45 +0200, Daan <d_stolp (AT) nospamhotmail (DOT) com>
wrote:

Stephen Poley wrote:
On Sun, 12 Sep 2004 15:37:33 +0200, Daan <d_stolp (AT) nospamhotmail (DOT) com
wrote:

The following website looks fine on the latest IE5, IE6 and Firefox.
However, in older versions of Internet Explorer, the menu overlaps the
text. Does anyone know why this is, or if there is some sort of a
workaround such that it looks good for all browsers?

Do you have a special reason for wanting to support IE4? IE versions up
to 4 and Netscape versions up to 4, all put together, make up barely 1%
of most readerships these days, and are decreasing every month.

I would recommend that you simply make sure your pages are readable in
those browsers, without worrying about them looking particularly good.
The simplest way is to hide the CSS from them completely by using
@import.

Well, if IE4 is not supported, I can live with that. But since my uncle
(who I made this site for), uses an older version of IE5 (I think
IE5.01), I want the site to look good in that version, as well as the
newer browsers. I've seen some hacks for different browser versions in
sample CSS codes before, but I wouldn't know how to implement which hack
in this case.

OK, for IE5 you typically have to play around with values for width and
padding, as it uses a broken CSS box-model. Once you've worked out what
you need, you place the IE5-specific bits first, then the Tantek hack,
then the values for other browsers. See
http://w3development.de/css/hide_css_from_browsers/ for details of the
hack.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Stephen Poley <sbpoleySpicedHamTrap (AT) xs4all (DOT) nl> writes:

OK, for IE5 you typically have to play around with values for width and
padding, as it uses a broken CSS box-model. Once you've worked out what
you need, you place the IE5-specific bits first, then the Tantek hack,
then the values for other browsers. See
http://w3development.de/css/hide_css_from_browsers/ for details of the
hack.

For IE5 I think a conditional comment might be a better way of doing
things. Partly because the Tantek hack looks really ugly [1], mainly
because it fools other things with good box models.

For example
main.css
div.box {
width: 10em;
padding: 1em;
}

ie5.css
html div.box {
width: 12em;
padding: 1em;
}

[1] The other hacks just involve odd selectors, or mysterious empty
comments, or similar. The Tantek hack, effective as it is, puts an
ugly mess in the middle of a style block. And I'm not sure what would
happen to something that couldn't deal with Tantek hacks but could
deal with whatever dummy rule you happened to put in.

--
Chris

On 14 Sep 2004 11:49:58 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk>
wrote:

Stephen Poley <sbpoleySpicedHamTrap (AT) xs4all (DOT) nl> writes:
OK, for IE5 you typically have to play around with values for width and
padding, as it uses a broken CSS box-model. Once you've worked out what
you need, you place the IE5-specific bits first, then the Tantek hack,
then the values for other browsers. See
http://w3development.de/css/hide_css_from_browsers/ for details of the
hack.

For IE5 I think a conditional comment might be a better way of doing
things.

Perhaps. The disadvantage is that the rules for a given style get spread
across two source files (three, if you've also got a simplified version
for Netscape 4) which makes maintenance a little harder. As always there
is a trade-off, and it largely comes down to personal preference.

Partly because the Tantek hack looks really ugly [1], mainly
because it fools other things with good box models.

Which do you have in mind? The only candidate I can think of might be
Amaya, which I've never tried. Is it any good?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Stephen Poley <sbpoleySpicedHamTrap (AT) xs4all (DOT) nl> writes:

On 14 Sep 2004 11:49:58 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk
wrote:
Partly because the Tantek hack looks really ugly [1], mainly
because it fools other things with good box models.

Which do you have in mind? The only candidate I can think of might be
Amaya, which I've never tried. Is it any good?

Amaya...can't remember. It currently crashes on my machine so I can't
test it either.

I think it was Opera 5 that needed a reverse hack (html>body, I think
is the common one) to get it to work again without breaking IE. I
suspect usage of that browser is sufficiently low not to need to
worry, though (I've not seen a single one in access logs this year; if
only Netscape 4 had died so quickly).

--
Chris

On 14 Sep 2004 13:19:48 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk>
wrote:

I think it was Opera 5 that needed a reverse hack (html>body, I think
is the common one) to get it to work again without breaking IE. I
suspect usage of that browser is sufficiently low not to need to
worry, though (I've not seen a single one in access logs this year; if
only Netscape 4 had died so quickly).

The "Be kind to Opera" rule is standard advice, though. Has been for years.

On 14 Sep 2004 13:19:48 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk>
wrote:

Stephen Poley <sbpoleySpicedHamTrap (AT) xs4all (DOT) nl> writes:
On 14 Sep 2004 11:49:58 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk
wrote:
Partly because the Tantek hack looks really ugly [1], mainly
because it fools other things with good box models.

Which do you have in mind? The only candidate I can think of might be
Amaya, which I've never tried. Is it any good?

Amaya...can't remember. It currently crashes on my machine so I can't
test it either.

I think it was Opera 5 that needed a reverse hack (html>body, I think
is the common one) to get it to work again without breaking IE.

Ah yes - I'd forgotten that. Thanks.

I
suspect usage of that browser is sufficiently low not to need to
worry, though (I've not seen a single one in access logs this year;

I think so. I suspect there may be quite a few people with older
computers who try to hang on to Opera 6 for a while, because it was very
fast, and Opera 7 is noticeably slower. But I think Opera 5 can probably
now be ignored. (I've just rechecked a page I used Tantek on in Opera 6,
and it looks OK.)

if only Netscape 4 had died so quickly).

Or IE 6 ......

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Neal <neal413 (AT) yahoo (DOT) com> writes:

On 14 Sep 2004 13:19:48 +0100, Chris Morris <c.i.morris (AT) durham (DOT) ac.uk
wrote:
I think it was Opera 5 that needed a reverse hack (html>body, I think
is the common one) to get it to work again without breaking IE. I
suspect usage of that browser is sufficiently low not to need to
worry, though (I've not seen a single one in access logs this year; if
only Netscape 4 had died so quickly).

The "Be kind to Opera" rule is standard advice, though. Has been for years.

Yes, I know. I just feel silly using a hack that needs another hack to
undo the problems caused by the first hack.

--
Chris