About this site's lack of design: Yes, it's supposed to look this way — I'm helping create a new sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977


Of Navigation Lists

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.

This item was posted by Dan Rubin on Saturday, September 20th, 2003.


You can follow comments on this item via the RSS 2.0 feed.

Comments are closed.

8 comments on “Of Navigation Lists”

  1. Posted by josh on Saturday, September 20th, 2003.

    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.

  2. Posted by Kevin on Saturday, September 20th, 2003.

    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.


  3. Posted by Russell Smith on Saturday, September 20th, 2003.

    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.

  4. Posted by Dan on Saturday, September 20th, 2003.

    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.


  5. Posted by Anne on Sunday, September 21st, 2003.

    h3:first-child{} is also not an option I think:



    I think adding an ID is more correct than adding a class name BTW.

  6. Posted by Dan on Sunday, September 21st, 2003.

    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 :-)

  7. Posted by justin on Sunday, September 21st, 2003.

    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.

  8. Posted by shaggy on Monday, September 29th, 2003.

    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