Discussion on:

Creating a pure CSS horizontal navigation bar

While we all hope everyone would be caught up with the times, as developers we are faced with users still using Netscape 4.7 in their NT 4.0 workstation...or any other non IE browser... where the sample provided
http://www.meadhra.com/cnet/040204/ExampleB.html
would look just like a bullet list.

But this does work with other non-IE browsers. I just tried it with Mozilla Firefox and it came out very nicely. I was a Netscape fanatic until I tried Firebird (Firefox's earlier name) and now I never use it. Hopefully we'll see the NS 4.7 crowd fade over to CSS2-aware and compliant browsers.

Hey, seriously, enough about Netscape 4.whatever. Let it go.
All of you. All of us! It's dead. It's been dead, it's always going
to be dead, and the miniscule fraction of users that still wish to
flog this dead horse are NOT worth your time.

This is not forward thinking, folks. The original article is...now
go forth and multiply. And NO MORE TALK about dead
browsers!!! Cripes, already.

Give me a break! If you are still bending over backwards to code for version 4 of any browser, I feel sorry for you.

The vast majority of web users have moved beyond version 4 browsers, and if web developers would stop pandering to the 1% of people out there still using Netscape 4.x, they would upgrade.

Move on. Please.

Been using this technique for some time. Only trouble is, each menu pad will take up the width of the caption. If you want = widths, you can't do it (e.g. setting either li or a to width:150px) won't work. If you have it as a VERTICAL menu, setting li width:150px works just great.

Incidentally the issue with Netscape is lack os CSS2 support in earlier versions. NS 7.1 manages this code very successfully.

This is the correct rendering in a browser that doesn't understand standard CSS syntax.

----------
Too bad it does not work on Netscape 4.7!
----------

works fine for me. degrades nicely into a list for all non-standards-compliant browsers (ns1, ns2, ns3, ns4, ie3, ie4, smartphones, pda's running palmos and ppc2002 or lower, webtv, etc.)

----------
as developers we are faced with users still using Netscape 4.7 in their NT 4.0 workstation...
----------

that's exactly why this method makes more sense. it will function in ANY browser (even ns1). users who have standards supporting browsers will get the functionality and design while users who don't just get the functionality.

----------
or any other non IE browser...
----------

what about ns7+, mozilla based browsers like firefox and camino, opera 6 and up, apple's safari, konqueror, etc., etc.. these are non-ie browsers that support standards. in fact, most of the above browser have much better standards support than ie6 does.

however, this technique really needs to keep modern styles (css2+) hidden from non-standards compliant browsers by using @import instead of embedding them in the page since the embedded css will crash certain browsers.

It won't work on a PDP-11 either. Then again, if you're using 20th century technology in the 21st century you'll find that a LOT of things don't work.

...seriously. Let them perish. It's more our job to educate those
users (and there are plenty of feasible, cost-effective ways to do
this) versus spending our lives catering to old browser tech.
Move on with life!

You all clearly do not work on an evironment where this is a requirenment. When you have this kind of organization under you, where upgrading these many users and existing applicaitons that were built back when Netscape was the only browsers is the only choice then you, like me, are stuck dealing wiht these issues, where "downgrading gracefully" is not an option.

You've lost your vertical seperators when transitioning to the CSS way.

And if I'm not mistaken, it's invalid HTML to add them between the and tags. You could try setting the right border of each list item to get the same effect except you'd have to address hiding it for the last list item. Can this be done with CSS that IE 5.5 understands?

the code below has a typo:
==========================

div#navbar2 lia:link {
}
div#navbar2 lia:visited {
}
div#navbar2 lia:hover {
}

there should be spaces after the 'li'
=====================================
div#navbar2 li a:link {
}
div#navbar2 li a:visited {
}
div#navbar2 li a:hover {
}

gay bitch

The code works fine in firefox and in Google chrome. But in IE8, the nav bar is displayed vertically instead of horizontally. I have used display:inline-block and white-space:nowrap;

thanks! I was in a fix and your article took me out. Just one thing if you could tell - is there a possibility that we can change colour of one single link if the user is visiting that link's page. (Tools section tab to become of a different colour when tools sections is visited.)

works great for me, thanks

What is Netscape? lmao