David Faulhaber wrote: > This is my first posting, and it should be known that I'm pleased to > join the discussion(s). That said, here's why I joined the list in > the first place.
Welcome. Yeah, I knew there had to be a reason... ;-) > I followed the "Scalable Navigation" example in chapter two of Dan > Cederholm's and everything looked great in Safari... until I checked > the site in Explore, Firefox, and Opera, all of which screwed up the > nav tabs. Opera displays only two of the tabs (inline), while > Explorer and Firefox stack all the tabs one on top of the other > against the left side. > http://www.hawaii.edu/eslhelp/courses.html You should visit the html and CSS validators, and fix some minor problems from the start, just to be on the safe side. However, the CSS validator won't pick up this... #nav a { float: right; .... } ...that will work much better in reverse, as... #nav a { float: left; .... } ...and only IE/win needs those anchors to float at all, as a mean to get its proprietary 'Layout'[1] to work and make the whole tab clickable. IE/win can't live without its bugs :-) Floats give 'Layout' by default in IE, but the proper standard-term is 'block formatting context'[2] which describes what really should happen, and standard compliant browsers can do without that on an anchor, as 'display: block' should do. The problem in your page is that floating a container one way and the content the same way may have some buggy side-effects in some cases. By reversing direction on the content - the anchor - the whole "thing" becomes a bit more stable across browser-land. You can use this information to separate IE/win from the standard compliant browsers, and feed such "extras" to IE/win only, in case some standard compliant browser choke on them. That happens quite often. Opera 8.5 and 9tp2, Firefox 1.5.0.1 and IE6 will render the corrected navigation just fine. Didn't check in others. Opera 9tp2 managed to render your original styles perfectly also, btw. regards Georg [1]http://www.satzansatz.de/cssd/onhavinglayout.html [2]http://www.w3.org/TR/CSS21/visuren.html#q15 -- http://www.gunlaug.no ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
