CSS Design: Taming Lists

by Mark Newhouse

181 Reader Comments

Back to the Article
  1. Thanks for the article. Its time I ventured into this scary area of web design once and for all.

    Copy & paste the code below to embed this comment.
  2. At http://www.normandale.edu/next/ I’m developing a slightly more complex version of the ul/li dropdown menu, starting from the http://www.gazingus.org/html/menuDropdown.html code.

    On IE5/Mac, the gazingus code works wonderfully (apart from that few-px offset bug.) My code, on the other hand, initally displays those top-level inline li elements on top of each other, suggesting that they’re displaying as block. Once you mouseover, they wind up inline.

    The menu offset is also very screwy, and there are a few other things …

    My main concern is the non-inline initial rendering. Has anyone else seen this? Fixed it?

    Copy & paste the code below to embed this comment.
  3. I am completely converted. This is a great article! Glad I Googled-it up. My question though it with orderted lists. My navigation menu follows essentially an outline structure.

    I’d like the make the ordered list appear exactly as you have it in your example (which the a:link to a:hover rollover effect). The problem is with an ordered list the number (or letter) preceding the menu label is outside the box that’s affected by the rollover.

    The box model for the label doesn’t seem to include the number part of the it for some reason. This seems to be by design. I suppose I could do an un-ordered list and put the number inside the box. But there are text-wrapping drawbacks to that and besides, you were so convincing about proper markup I just don’t want to do that!

    Any ideas – or a clue as to what I am even talking about? :-)

    Copy & paste the code below to embed this comment.
  4. Very nice site! Much good information in here

    Copy & paste the code below to embed this comment.
  5. I swear I once saw a way to alternate colors for iterative items (lists, table rows) with CSS – I think it had something to do with using a counter(), but am not 100% sure. Has anyone seen this trick?

    Copy & paste the code below to embed this comment.
  6. Just thought you’d all like to know about a bug I’ve run into:

    In IE6 (at least on XP) if you use a UL for links or such, and you specify padding for the UL or any of its children, you end up with the whole thing being larger than it should be – for example if it’s a link list in a div that you’re using for a navbar, and you set a width for the div, the div will end up being larger than you specified by the amount of padding specified in the children.

    Copy & paste the code below to embed this comment.
  7. A few lines of that CSS code were Greek to me, but other than that I really learned a lot. As a “designer” who likes everything pretty AND a “coder” who likes everything slim and clean, this artcle was able to quiet the voices in my head for a moment or two. I now feel that both sides of my brain have a chance at shaking hands in the near future and solving many layout issues.

    Copy & paste the code below to embed this comment.
  8. A great article, one I will definately bookmark and use elements from. But I still think that when I really want my navigation to work in all browsers, and look the same in Netscape or IE, or if the positioning is important, and must line up with element in the background image or rest of the page, good ol’ fashioned tables, javascript and blank gifs are the answer. CSS still seems to flakey and browser-specific as most of the responses here seem to prove, what with missing divider lines, vertical rounding errors and positions changing!

    Copy & paste the code below to embed this comment.
  9. I am finding the transition to css extremely frustrating … so I was please to come across this article. However, the layouts that my desginers come up with are slightly more complex than the real world example you demo’d.

    Looking at the example, I was wondering how one would add bullets and keep an alternating background color for each row (list item)? When I add bullets, the background color stops just before the bulllet. Also, you simply set a single-pixel solid border as a divider between items. However, my designers like to use single-pixel-dotted-lines between rows, so how does one go about coding for that? Is it possible to specify an image for a border style?

    thanks,
    skube

    Copy & paste the code below to embed this comment.
  10. I find that the hover effect is slow in IE6 compared to Opera.
    Is this correct and can something be done to make it faster?

    Thank you,

    Joenco

    Copy & paste the code below to embed this comment.
  11. I read the article and it the cogs spinning, the pipe example especially since I use similar formatting for most of my menus in web apps I build for my clients. The pipe example works great for 90% of those menus, but there are a few I need to have the menu be the width of the page and not wrap if the user resizes the window. Additionally I am creating this list on the fly from a db and so I cannot put a width static width in the li. I currently have to use a table with the width=100% using nowrap in the cells to achive this. Has anyone else done this? Or is this just not currently possible?

    Thanks,
    Eric

    Copy & paste the code below to embed this comment.
  12. Normandale Community College ( http://www.normandale.edu ) just put the horizontal li nav into practice as part of a XHTML/CSS redesign. IE5 Mac and Opera begged to be excused, but everything else is happy.

    One more thing: Eric Meyer’s recent redesign reminded me of the wisdom of putting one’s lengthy navigation after one’s content … thus the site’s nav menu gets included at the end of the XHTML, but is visually positioned at the top.

    Beautifully simple trickery, this.

    Copy & paste the code below to embed this comment.
  13. Great thanks, this is what I was looking for :)

    Copy & paste the code below to embed this comment.
  14. Does any know how to create a sub list in a different style that works for both IE and NS/Mozilla
    <ul><li>link1</li>
    <li><ul><li>sublink</li></ul>
    </ul>

    I’ve manage fine with IE.
    Example #menu li li a:

    Any ideas

    Copy & paste the code below to embed this comment.
  15. I’ve done it… simply missed a ; off a line and now that it is corrected its working like a treat

    Copy & paste the code below to embed this comment.
  16. Being relatively new to this approach with CSS a few things confuse me. First of all, what the heck are the shortcuts for the hex colors? I can figure out #000 and #fff, but where do you find all the rules pertaining this formula for specifying hex color values?

    Secondly, I’m so used to measuring everything in pixels, I cannot relate to the em unit of measure. How can you possibly, get things lined up accurately using that unit of measure?

    What’s the difference between margins and padding? Is that like the difference between cellspacing and cellpadding?

    In the #button style, the padding is specified as such:

    padding: 0 0 1em 0;

    I’m assuming those are left, right, top, bottom?

    I’d appreciate any feedback. This stuff is really great!

    Copy & paste the code below to embed this comment.
  17. I’m designing a new site and intrested in using CSS for the menus and very intrested while reading the article. Once thing I noticed thats not covered are sub menus.

    In my case I want to have vertical menus that when hovered over, open a sub menu to the right. Is this possible ?

    Shane.

    Copy & paste the code below to embed this comment.
  18. Well I’ve come to all this late and am on a steep learning curve.

    I’m trying to tame a nested list for use as a menu. Basically I don’t want any indent, I do want each menu item in a box, and I do want to be able to control the background and font colours, according to the level.

    Taming the automatic indenting and ‘leading’ seems to be a real challenge, and there seem to be all sorts of variations between Mozilla and IE6. Has anyone done this and have an example. I can get what I want with <h?> tags for the top level items and <ul> for the second level. but I want to be able to scale to three or four levels.

    Copy & paste the code below to embed this comment.
  19. Bugs:
    – Mozilla 1.2.1 on Win XP: Renders only every second horizontal line, as mentioned above -> http://tippetevling.net/ala/realworld.png

    - IE6 Service Pack 1 on Win XP: Menu jumps to the left when entered with the mouse for the first time, as mentioned above.

    Copy & paste the code below to embed this comment.
  20. Seems as both bugs are fixed / there are workarounds in this thread.

    Copy & paste the code below to embed this comment.
  21. I’m busy boning up on CSS and your site is a revelation. I just took this page on Taming Lists and the menu you prepared in that page is great. By coincidence the colour scheme and so on were already perfect.

    I will now be working on enhancing my own site to your standards.

    Excellent.

    Copy & paste the code below to embed this comment.
  22. Great article! It’s hard to find really good CSS tutorials on the internet that go beyond the basics, yet still consider real-world browser compatibility issues. Anyway, this article really has me thinking a bit different now about some of my HTML/CSS structures.

    Copy & paste the code below to embed this comment.
  23. I really liked the article you have put out. I am having problems with my menu though. When I make this menu, in IE there is big space on the left hand side of the menu. In NS this doesn’t happen. How did you fix this problem on your pages, they look fine?
    I tried to move the menu to the left with the CSS “margin-left: -16” but this would cause it to be hidden partially in NS. Any suggestions?

    Copy & paste the code below to embed this comment.
  24. Where can I find the thread of my question?

    Copy & paste the code below to embed this comment.
  25. I really liked the article you have put out. I am having problems with my menu though. When I make this menu, in IE there is big space on the left hand side of the menu. In NS this doesn’t happen. How did you fix this problem on your pages, they look fine?
    I tried to move the menu to the left with the CSS “margin-left: -16” but this would cause it to be hidden partially in NS. Any suggestions?

    Copy & paste the code below to embed this comment.
  26. Try ditching the li / ul list-style image in place of attaching a background image using no repeat :

    background-image: url(../bullet.gif);
    background-position: left;
    background-repeat: no-repeat;

    remember to turn off the li display – use outside and voila you get to control the distance between bullet and the start of list contents.

    Copy & paste the code below to embed this comment.
  27. I have placed the following code in my CSS:

    background-image: url(../bullet.gif);
    background-position: left;
    background-repeat: no-repeat;

    I still have the same problem.
    I am not so familiar with the CSS to understand what you mean by ditching the ul/li and how do I “turn off the li display”?

    Could you please explain more in detail?

    Here is what I have in my CSS pertaining to the menu:


    #leftnav {
    width: 10em;
    border-right: 1px solid #000;
    padding: 0 0 0em 0;
    margin-bottom: 0em;
    font-family: ‘Trebuchet MS’, ‘Lucida Grande’,
    Verdana, Lucida, Geneva, Helvetica,
    Arial, sans-serif;
    background-color: #0e3061;
    color: #333;
    }


    #leftnav ul {
    margin: 0; /*removes indent IE and Opera*/
    padding: 0; /*removes indent Mozilla and NN7*/
    list-style-type: none; /*turns off display of bullet*/
    background-image: url(../bullet.gif);
    background-position: left;
    background-repeat: no-repeat;
    border: none;
    font-family: ‘Trebuchet MS’, ‘Lucida Grande’,
    Verdana, Lucida, Geneva, Helvetica,
    Arial, sans-serif;
    font-size: 10px;
    }

    #leftnav li {
    border-bottom: 1px solid #4A6D9B;
    margin-left: 0;
    }

    #leftnav li a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 10px solid #21497e;
    border-right: 2px solid #21497e;
    background-color: #0e3061;
    background-image: url(../Graphics/LeftBtn_Blank.gif); /* */
    background-position: 0px 0px;
    color: #fff;
    text-decoration: none;
    width: 100%;
    }

    html>body #leftnav li a {
    width: auto;
    }

    #leftnav li a:hover {
    border-left: 10px solid #0e3061;
    border-right: 2px solid #0e3061;
    background-color: #21497e;
    color: #fff;
    }
    #currentlink a:link, #currentlink a:visited, #currentlink a:hover {
    border-left: 10px solid #0e3061;
    border-right: 2px solid #0e3061;
    background-color: #21497e;
    color: #fff;
    }

    Copy & paste the code below to embed this comment.
  28. I’ve created a navigation menu based on the examples found in this article, but unlike the example I wanted to leave the list style to include the bullet. Unfortunately, IE6 is placing the bullet on the second line of any links that wrap to the next line. This is due to the display:block; width: 100% bug fix for IE.

    Anyone else experiening this or know a fix?

    Copy & paste the code below to embed this comment.
  29. i am trying very hard to understand everything about CSS styling… and it is kind of tricky because there is way too many HACKS to consider..

    however zeldman + friends or friends + zeldman are right… let’s follow webstandards and hopefully it will be better on the web.

    oh.. i forgot… my question…
    y’see i am trying to make a menu (a <Li> menu) and i would like to have a background-image inside the <Li> that will swop when you mouse-over it… but i cannot make this happen.. i tried the menu recipe over at Project VII but that is not a listmenu.. is there a way to do this or is it impossible?

    zpunktled

    Copy & paste the code below to embed this comment.
  30. Has anyone solved the problem of using style classes to create multiple nested lists having DIFFERENT list-style-types within one doc? Example:
    I
    A
    B
    II

    followed in the same doc by:
    1
    a
    b
    2

    That is, I want to have 2 different nested-list classes, used interchangeably in a single doc.

    Copy & paste the code below to embed this comment.
  31. Awesome work on this article. It was a great help to me.

    Copy & paste the code below to embed this comment.
  32. The followiung CSS definitions will allow 2 different nested list styles in one doc. Just put the list inside a DIV or SPAN with the desired class. No need to re-specify the class on each OL tag in the doc, just in the STYLE definition.
    .num OL {list-style-type: decimal; }
    .num OL OL {list-style-type: lower-alpha; }
    .num OL OL OL {list-style-type: lower-roman; }

    .roman OL {list-style-type: upper-roman; }
    .roman OL OL {list-style-type: upper-alpha; }
    .roman OL OL OL {list-style-type: decimal; }
    .roman OL OL OL OL {list-style-type: lower-alpha; }
    .roman OL OL OL OL OL {list-style-type: lower-roman; }

    Copy & paste the code below to embed this comment.
  33. hey – i’m having slight problems with the horizontal list trick – i made one with the pipe thing as a navigation bar, and it all looks fine, but the problem I have is that I want it to wrap correctly. The way i did it was to use “a { white-space: nowrap; }” so that the links stayed together, but i am getting different behaviour between ie6 and moz1.4…

    take a look here: http://www.dannypoo.co.uk/herbawohl/inline.htm

    my problem is with the vertical lines, where if you shrink the navigation bar so that it wraps (something which will no doubt happen often as it’s quite wide).

    as you will see if you use mozilla, everything works as it should, with the horizontal line retaining its padding from the text as it wraps to the next line. problem with IE is that it seems to include the end of the previous line in with the padding for the wrapped list element.

    can someone help, cos this is driving me crazy!!!

    cheers

    danny

    Copy & paste the code below to embed this comment.
  34. I’ve got a ul that I’m using for my left nav. Instead of using text, I’m using images as the nav elements. Within the li elements, IE6 keeps adding 4px space between the images. It works fine in other browsers and on a Mac. Anyone else seen this? Is there a fix? I tried copying and pasting the styles directly from the great article and thing were fine. Then I added an img and IE6 added the 4px space below it. Any suggestions?

    Thanks,
    Greg

    Copy & paste the code below to embed this comment.
  35. Hi, does anyone read this far?

    Anyway, I notice with my custom bullets that on IE6/Win sometimes the bullets don’t get rendered. I’ve tried this with custom bullets (12×12 gifs), and I’ve also redone it all using the same gifs but as background images instead.
    Either way seems to produce the problem.

    Is this a known IE bug, or is it my code perhaps? It’s pretty intermittent, I can’t guarantee reproducing it. So maybe it’s also dependant on the system memory or capabilities?

    Great article by the way!

    Cheers,
    Dan

    Copy & paste the code below to embed this comment.
  36. I notice in this article that the inline list items are always assigned a margin. They are never flush together in Mozilla 1.4 and Mozilla Firebird 0.6.1.

    Why is that, and how can I get the list items to be flush. Even in the example the margins are set to 0px.

    Thanks! Great article.

    Copy & paste the code below to embed this comment.
  37. Anyway of making the button bgcolour staying on when clicked? And only having the last button clicked retain the new background colour value?

    Copy & paste the code below to embed this comment.
  38. Tim, maybe that should be done in HTML. Change the class of the “clicked” button, and be sure to make that class have the color you want.

    Copy & paste the code below to embed this comment.
  39. There’s a wonderfully gruesome bug in Mac IE 5.2 that makes working with inline lists and the border-pipe trick very annoying. It appears you cannot completely text-align:center or text-align:right an inline list. If you do, you will see the list elements centered but when you access anything like border values they are still aligned left! Now that’s some sloppy programming if they’re hacking up block elements like that, avoiding encapsulation. This was a very hard bug to track down but 2 hours later I figured it out so beware. Win IE 6 handles ok, haven’t tested in earlier Win IEs. You can workaround by applying a padding-left but you can’t really get it centered that way if the list is on two lines.

    Copy & paste the code below to embed this comment.
  40. Does anyone have a list of the browsers that support custom images for bullet points please? Is it purely IE?

    Copy & paste the code below to embed this comment.
  41. I was trying to make a different a:hover color work, but ie added extra padding on the right. Check out this tutorial for a neat fix that works on six browsers:

    http://diveintomark.org/archives/2003/03/24/pure_css_tabs

    Copy & paste the code below to embed this comment.