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

Suffering from chronic idiocy since 1977

|

Of Navigation Lists

After find­ing Accessify’s ter­rific new tool List-o-matic, I decided it was about time I updated the pri­mary nav­i­ga­tion of this site to reflect my high opin­ion of unordered lists as nav­i­ga­tion. In most browsers, you should not notice any change at all (unless you are view­ing this site in a text-only browser, with style sheets off, or with a screen reader), how­ever: if you are using a Mozilla-based browser (Fire­bird, Netscape, Mozilla, Camino, etc.) you might very well notice the same (minor) dis­play glitch I’m get­ting on my test machines.

The bot­tom of the navbar has a 1-pixel bor­der on most browsers, but for some rea­son I can’t get it to work prop­erly with the Mozilla fam­ily. This shouldn’t be rocket surgery, but I’ve now spent 3 hours try­ing every­thing I can think of to fix the glitch, to no avail.

Part of the prob­lem is styling the new markup to look the same as the old div-based markup, with­out break­ing the rest of the exist­ing lay­out. I just can’t under­stand why I can’t track this thing down (heck, it’s even work­ing prop­erly in IE5/OS 9!).

If any­one hap­pens to know what I’m miss­ing, please send your sug­ges­tions my way. Feel free to just drop a note in the comments.

UPDATE: After find­ing what I thought was a solu­tion, then real­iz­ing 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 side­bar, so I could treat it dif­fer­ently in all browsers. If any­one has a bet­ter solu­tion (e.g. one that doesn’t require chang­ing the markup) please let me know.

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

Categories:

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 con­tent and the bor­der appears. So, I am assum­ing it is some­thing like the con­tent div over­lap­ping the bot­tom of the nav.

    Hope that helps.

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

    The main thing I noticed is that the mar­gin def­i­n­i­tion in basic.css for con­tenten­twrap­per appears to be incomplete.

    mar­gin: ;

    Chang­ing it to mar­gin: 1px 0 0 0; gave me back the nav bor­der and didn’t appear to affect IE 6.x or any­thing else.

    Kevin

  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 nav­i­ga­tion, so I redid it in unordered lists a while back. http://www.igeanetowrk.com/~russ/ They are slightly dif­fer­ent, but I think they worked out ok.

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

    Thanks to every­one who offered sug­ges­tions — I was able to track the prob­lem down to the #side­bar div, and by chang­ing the top mar­gin of the side­bar to 1px (it was 0px) and using adja­cent selec­tors on the head­ings (to remove the top bor­der on only the first head­ing), I was able to get the result I wanted.

    UP

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

    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 cor­rect than adding a class name BTW.

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

    Yes, I had looked into using the first-child selec­tor, but found that it is not sup­ported by (sur­prise) IE6.

    And you are cor­rect about the class/ID issue, and I have altered the markup accord­ingly. Thanks for the correction :-)

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

    I have expe­ri­enced sim­i­lar prob­lems while devel­op­ing my own unordered list nav­i­ga­tion. It can be very frus­trat­ing and at the same time reward­ing in the end. Damn IE/6! Right on.

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

    I could not recre­ate the prob­lem you described. I did how­ever cre­ate a sim­pler (i think) solu­tion see: http://www.lucen8.com/ET/lists.htm .

    It avoids floats (which are totaly cool but always seem to cause prob­lems) and uses neg­a­tive mar­gins instead of the ‘class=“first“‘.

    Please give comments