Horizontal CSS menu sounds wrong with Netscape, Mozilla and Opera

07/03/2008, 11h44

Hello all,

I have a problem with an horizontal menu which is managed using HTML/CSS
combination.

All sounds right in most of the major Windows's browsers (not tried
until now under Linux, will do after), but not using Netscape, Mozilla
(not the FireFox one) and Opera.

I've made a test page in which you can see the CSS code, snapshots in
every tested browsers and my observations at the bottom.

http://yohannl.tripod.com/menutest/index.html

Do you have an idea about the reason why it's wrong with these three
browsers and what to do ?

07/03/2008, 21h38

Yohan N. Leder wrote:
>
> I have a problem with an horizontal menu
> http://yohannl.tripod.com/menutest/index.html
>
> Do you have an idea about the reason why it's wrong with these three
> browsers

They're old and senile?

Mozilla 1.6, Netscape 7 and Opera 7 are dinosaurs now. I suspect you
could count the number of people still using those versions on one hand.

> and what to do ?

I'd do nothing, except get some more up-to-date versions for testing.
A more recent Seamonkey works just fine, as does Netscape 7.2. I
wouldn't bother with any Opera release before 8.x, and even that's
questionable.

It's usually not worth the trouble of catering to ancient browsers. If
anyone is still using them, it's unlikely your page is the first one
they've come across that does something odd.

--
Berg

07/03/2008, 21h55

In article <63dqv5F25k08eU1@mid.individual.net>, bergamot@visi.com
says...
> Mozilla 1.6, Netscape 7 and Opera 7 are dinosaurs now.
>

I agree with you, but I've some "no-software oriented" visitors (if you
see what I mean) who use them... So, difficult to push then toward newer
versions unless if I do the install myself on their computer

Well, technically, do you think it's because of misinterpretation of
these old browsers or because of a lack in my CSS/HTML ?

08/03/2008, 12h09

In article <63dqv5F25k08eU1@mid.individual.net>, bergamot@visi.com
says...
> I'd do nothing, except get some more up-to-date versions for testing.
> A more recent Seamonkey works just fine, as does Netscape 7.2. I
> wouldn't bother with any Opera release before 8.x, and even that's
> questionable.
>

Well, after my yesterday reply, I've tried to test further this morning
(knowing my own station is under Windows 2K):

- Netscape 7.1 : not tested yet because their live install has some
difficult to download what necessary (maybe the week-end effect).

- Mozilla : not updated yet.

- Opera 9.26 : the result is worse than with the previous release I used
(the 7.23)... Just see http://yohannl.tripod.com/menutest/index.html ;
I've updated the page at the bottom.

08/03/2008, 18h50

Yohan N. Leder wrote:

> Well, after my yesterday reply, I've tried to test further this morning
> (knowing my own station is under Windows 2K):
>
> - Netscape 7.1 : not tested yet because their live install has some
> difficult to download what necessary (maybe the week-end effect).

AOL pulled the plug, Netscape is dead.

>
> - Mozilla : not updated yet.

Because it is SeaMonkey
http://www.seamonkey-project.org/

>
> - Opera 9.26 : the result is worse than with the previous release I used
> (the 7.23)... Just see http://yohannl.tripod.com/menutest/index.html ;
> I've updated the page at the bottom.

Well first off, use HTML 4.01 strict then your pseudo|invalid xhtml as
to not trigger quirks mode.

Next UL is a block element so no need for the DIV and let's remove all
the other superfluous elements.

If you are just adjusting one css property like background-color, don't
use the shortcut "background" it does more that you realize...

My method here doesn't toggle display but moves the absolutely
positioned block element in and out of the viewport so it does not
effect the flow of the page as toggling the display property of an element.

This works in IE5 to 7, FF and Opera up to version 8.x (9 seems to have
issues... but Opera still having trouble breaking 1-2% and maybe they
will fix it...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<title>Toggle Position</title>

<style type="text/css">
ul#menu {
list-style: none; margin: 0; padding: .5em;
color: #000; background-color: #ccc;
}

ul#menu li {
/* no need for floats, just display inline */
display: inline; margin: 0; padding: 0 .5em;
}

ul#menu li a {
/* set reference for position of child elements */
position: relative;
}

ul#menu li a span {
/* set the style of the 'popup' panel */
display: block; position: absolute;
/* push it off screen and use EMs for box size */
left: -999em; top: 1.8em; width: 10em;
padding: .5em; border: 1px solid #00f;
text-decoration: none; background-color: #fed;
}

ul#menu li a:hover {
/*
IE quirk you must do something in style for the hovered element
in order to do an hover effect on a descendant element so here
I am just setting the background color to the same as the UL
it will have no visual effect, but satisfies IE so I can make the
next rule on the SPAN work!
*/
background-color: #ccc;
}

ul#menu li a:hover span {
/* move the 'popup' panel and align with parent A */
left: 0;
}

</style>

</head>
<h1>Toggling Position</h1>
<body>
<ul id="menu">
<li><a href="some.html">SOME
<span>This is the place to find something...</span></a>
</li>

<li><a href="dummy.html">DUMMY
<span>Some dummy things for the test framework</span></a>
</li>

<li><a href="stuff.html">STUFF
<span>If you want some unuseful stuffs for your dog</span></a>
</li>

<li><a href="thing.html">THING
<span>All other things are listed here.</span></a>
</li>
</ul>
</body>
</html>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

09/03/2008, 00h54

In article <e413e$47d2e011$40cba7be$333@NAXS.COM>, lws4art@central.net
says...
> Well first off, use HTML 4.01 strict then your pseudo|invalid xhtml as
> to not trigger quirks mode.
>
> Next UL is a block element so no need for the DIV and let's remove all
> the other superfluous elements.
>
> If you are just adjusting one css property like background-color, don't
> use the shortcut "background" it does more that you realize...
>
> My method here doesn't toggle display but moves the absolutely
> positioned block element in and out of the viewport so it does not
> effect the flow of the page as toggling the display property of an element.
>
> This works in IE5 to 7, FF and Opera up to version 8.x (9 seems to have
> issues... but Opera still having trouble breaking 1-2% and maybe they
> will fix it...)
>

OK; thnaks for this detailled replyu, Jonathan. I'm not at work just
now, but will see your way deeper at beginning of the week.

Have a nice sunday

07/03/2008, 11h44	#1
Yohan N. Leder Messages: n/a Hébergeur:	Horizontal CSS menu sounds wrong with Netscape, Mozilla and Opera Hello all, I have a problem with an horizontal menu which is managed using HTML/CSS combination. All sounds right in most of the major Windows's browsers (not tried until now under Linux, will do after), but not using Netscape, Mozilla (not the FireFox one) and Opera. I've made a test page in which you can see the CSS code, snapshots in every tested browsers and my observations at the bottom. http://yohannl.tripod.com/menutest/index.html Do you have an idea about the reason why it's wrong with these three browsers and what to do ?

07/03/2008, 21h38	#2
Bergamot Messages: n/a Hébergeur:	Re: Horizontal CSS menu sounds wrong with Netscape, Mozilla and Opera Yohan N. Leder wrote: > > I have a problem with an horizontal menu > http://yohannl.tripod.com/menutest/index.html > > Do you have an idea about the reason why it's wrong with these three > browsers They're old and senile? Mozilla 1.6, Netscape 7 and Opera 7 are dinosaurs now. I suspect you could count the number of people still using those versions on one hand. > and what to do ? I'd do nothing, except get some more up-to-date versions for testing. A more recent Seamonkey works just fine, as does Netscape 7.2. I wouldn't bother with any Opera release before 8.x, and even that's questionable. It's usually not worth the trouble of catering to ancient browsers. If anyone is still using them, it's unlikely your page is the first one they've come across that does something odd. -- Berg

07/03/2008, 21h55	#3
Yohan N. Leder Messages: n/a Hébergeur:	Re: Horizontal CSS menu sounds wrong with Netscape, Mozilla and Opera In article <63dqv5F25k08eU1@mid.individual.net>, bergamot@visi.com says... > Mozilla 1.6, Netscape 7 and Opera 7 are dinosaurs now. > I agree with you, but I've some "no-software oriented" visitors (if you see what I mean) who use them... So, difficult to push then toward newer versions unless if I do the install myself on their computer Well, technically, do you think it's because of misinterpretation of these old browsers or because of a lack in my CSS/HTML ?

08/03/2008, 12h09	#4
Yohan N. Leder Messages: n/a Hébergeur:	Re: Horizontal CSS menu sounds wrong with Netscape, Mozilla and Opera In article <63dqv5F25k08eU1@mid.individual.net>, bergamot@visi.com says... > I'd do nothing, except get some more up-to-date versions for testing. > A more recent Seamonkey works just fine, as does Netscape 7.2. I > wouldn't bother with any Opera release before 8.x, and even that's > questionable. > Well, after my yesterday reply, I've tried to test further this morning (knowing my own station is under Windows 2K): - Netscape 7.1 : not tested yet because their live install has some difficult to download what necessary (maybe the week-end effect). - Mozilla : not updated yet. - Opera 9.26 : the result is worse than with the previous release I used (the 7.23)... Just see http://yohannl.tripod.com/menutest/index.html ; I've updated the page at the bottom.

08/03/2008, 18h50	#5
Jonathan N. Little Messages: n/a Hébergeur:	Re: Horizontal CSS menu sounds wrong with Netscape, Mozilla and Opera Yohan N. Leder wrote: > Well, after my yesterday reply, I've tried to test further this morning > (knowing my own station is under Windows 2K): > > - Netscape 7.1 : not tested yet because their live install has some > difficult to download what necessary (maybe the week-end effect). AOL pulled the plug, Netscape is dead. > > - Mozilla : not updated yet. Because it is SeaMonkey http://www.seamonkey-project.org/ > > - Opera 9.26 : the result is worse than with the previous release I used > (the 7.23)... Just see http://yohannl.tripod.com/menutest/index.html ; > I've updated the page at the bottom. Well first off, use HTML 4.01 strict then your pseudo\|invalid xhtml as to not trigger quirks mode. Next UL is a block element so no need for the DIV and let's remove all the other superfluous elements. If you are just adjusting one css property like background-color, don't use the shortcut "background" it does more that you realize... My method here doesn't toggle display but moves the absolutely positioned block element in and out of the viewport so it does not effect the flow of the page as toggling the display property of an element. This works in IE5 to 7, FF and Opera up to version 8.x (9 seems to have issues... but Opera still having trouble breaking 1-2% and maybe they will fix it...) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>Toggle Position</title> <style type="text/css"> ul#menu { list-style: none; margin: 0; padding: .5em; color: #000; background-color: #ccc; } ul#menu li { /* no need for floats, just display inline / display: inline; margin: 0; padding: 0 .5em; } ul#menu li a { / set reference for position of child elements / position: relative; } ul#menu li a span { / set the style of the 'popup' panel / display: block; position: absolute; / push it off screen and use EMs for box size / left: -999em; top: 1.8em; width: 10em; padding: .5em; border: 1px solid #00f; text-decoration: none; background-color: #fed; } ul#menu li a:hover { / IE quirk you must do something in style for the hovered element in order to do an hover effect on a descendant element so here I am just setting the background color to the same as the UL it will have no visual effect, but satisfies IE so I can make the next rule on the SPAN work! / background-color: #ccc; } ul#menu li a:hover span { / move the 'popup' panel and align with parent A */ left: 0; } </style> </head> <h1>Toggling Position</h1> <body> <ul id="menu"> <li><a href="some.html">SOME <span>This is the place to find something...</span></a> </li> <li><a href="dummy.html">DUMMY <span>Some dummy things for the test framework</span></a> </li> <li><a href="stuff.html">STUFF <span>If you want some unuseful stuffs for your dog</span></a> </li> <li><a href="thing.html">THING <span>All other things are listed here.</span></a> </li> </ul> </body> </html> -- Take care, Jonathan ------------------- LITTLE WORKS STUDIO http://www.LittleWorksStudio.com

09/03/2008, 00h54	#6
Yohan N. Leder Messages: n/a Hébergeur:	Re: Horizontal CSS menu sounds wrong with Netscape, Mozilla and Opera In article <e413e$47d2e011$40cba7be$333@NAXS.COM>, lws4art@central.net says... > Well first off, use HTML 4.01 strict then your pseudo\|invalid xhtml as > to not trigger quirks mode. > > Next UL is a block element so no need for the DIV and let's remove all > the other superfluous elements. > > If you are just adjusting one css property like background-color, don't > use the shortcut "background" it does more that you realize... > > My method here doesn't toggle display but moves the absolutely > positioned block element in and out of the viewport so it does not > effect the flow of the page as toggling the display property of an element. > > This works in IE5 to 7, FF and Opera up to version 8.x (9 seems to have > issues... but Opera still having trouble breaking 1-2% and maybe they > will fix it...) > OK; thnaks for this detailled replyu, Jonathan. I'm not at work just now, but will see your way deeper at beginning of the week. Have a nice sunday

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email