After finding Accessify’s terrific new tool List-o-matic, I decided it was about time I updated the primary navigation of this site to reflect my high opinion of unordered lists as navigation. In most browsers, you should not notice any change at all (unless you are viewing this site in a text-only browser, with style sheets off, or with a screen reader), however: if you are using a Mozilla-based browser (Firebird, Netscape, Mozilla, Camino, etc.) you might very well notice the same (minor) display glitch I’m getting on my test machines.
The bottom of the navbar has a 1-pixel border on most browsers, but for some reason I can’t get it to work properly with the Mozilla family. This shouldn’t be rocket surgery, but I’ve now spent 3 hours trying everything I can think of to fix the glitch, to no avail.
Part of the problem is styling the new markup to look the same as the old div-based markup, without breaking the rest of the existing layout. I just can’t understand why I can’t track this thing down (heck, it’s even working properly in IE5/OS 9!).
If anyone happens to know what I’m missing, please send your suggestions my way. Feel free to just drop a note in the comments.
UPDATE: After finding what I thought was a solution, then realizing the error of my ways (damn IE6, damn it to hell!) I have (for now) used a cop-out fix: I added a class to the first H3 in the sidebar, so I could treat it differently in all browsers. If anyone has a better solution (e.g. one that doesn’t require changing the markup) please let me know.
Comments
8 responses to “Of Navigation Lists”
This may not be a ton of help, but it is 3 am and I am too tired to play around with this much.
I just deleted your content and the border appears. So, I am assuming it is something like the content div overlapping the bottom of the nav.
Hope that helps.
The main thing I noticed is that the margin definition in basic.css for contententwrapper appears to be incomplete.
margin: ;
Changing it to margin: 1px 0 0 0; gave me back the nav border and didn’t appear to affect IE 6.x or anything else.
Kevin
I’m not sure if this will help at all. But I liked the way you did your navigation, so I redid it in unordered lists a while back. http://www.igeanetowrk.com/~russ/ They are slightly different, but I think they worked out ok.
Thanks to everyone who offered suggestions — I was able to track the problem down to the #sidebar div, and by changing the top margin of the sidebar to 1px (it was 0px) and using adjacent selectors on the headings (to remove the top border on only the first heading), I was able to get the result I wanted.
UP
h3:first-child{} is also not an option I think:
http://www.w3.org/TR/CSS2/selector.html#x25
http://devedge.netscape.com/library/xref/2003/css-support/css2/selectors.html
I think adding an ID is more correct than adding a class name BTW.
Yes, I had looked into using the first-child selector, but found that it is not supported by (surprise) IE6.
And you are correct about the class/ID issue, and I have altered the markup accordingly. Thanks for the correction :-)
I have experienced similar problems while developing my own unordered list navigation. It can be very frustrating and at the same time rewarding in the end. Damn IE/6! Right on.
I could not recreate the problem you described. I did however create a simpler (i think) solution see: http://www.lucen8.com/ET/lists.htm .
It avoids floats (which are totaly cool but always seem to cause problems) and uses negative margins instead of the ‘class=”first”‘.
Please give comments