CSS Design: Taming Lists

by Mark Newhouse

181 Reader Comments

Back to the Article
  1. As there ist no discussion at the replace tables with CSS posting, i will post my question here. Up to now i have not found a solution for the vertical alignment problem without tables. Look:
    <style>
    #middle {
    vertical-align: middle;
    text-align:center;
    height:100px;
    width:100px;
    background-color:pink;
    }
    </style>
    <div id=“middle”>xxxxx</div>

    This code should generate this:
    ++++++++++++++++++
    + +
    + +
    + XXXX +
    + +
    + +
    ++++++++++++++++++
    But it generates this one:
    ++++++++++++++++++
    + XXXX +
    + +
    + +
    + +
    + +
    ++++++++++++++++++
    What shoud I Do?

    but it works with tables:
    <table><tr><td id=“middle”>xxxxx</td></tr></table>

    if you past an answer please mail me a note, really would like to know how it works.

    Copy & paste the code below to embed this comment.
  2. Simply outstanding! Thanks for the blow-by-blow description, a necessity for ham-handed folks like me who really appreciate a detailed, in-depth discussion.

    Copy & paste the code below to embed this comment.
  3. Go to my website to see me trying to use the list idea. I’m okay with the fact that the neat bullet symbols won’t show up in IE.

    What I’m disturbed by is the way the background is on the sidebar with Opera 7. The background is supposed to extend all the way across the sidebar to a little bit away from the edge of the content. This problem isn’t in IE, for some reason.

    Also, “e-mail” in the sidebar is behaving in some very odd fashion. The word “mail” is in the next line as if there was some kind of line break between “e-” and “mail.” This problem, also, is not in IE.

    To be honest, those problems were there for Opera 7 even before I tried out the list thing. Even the “e-mail” problem. I used this as a way to be vaguely on-topic.

    Copy & paste the code below to embed this comment.
  4. when you have a{display:block} and you specify “height:1em”, then the divs are also active for the whole width in IE/Win.

    Copy & paste the code below to embed this comment.
  5. thjis website is cool

    Copy & paste the code below to embed this comment.
  6. Another reason for using proper lists for a series of links is the W3C WAI requirement to have links separated by more than white space. This and the fact that they degrade nicely (enough) in early browsers are key issues.

    There is also a potential WAI issue about using graphics for bullets in that they will not be able to include alt tags, but I am not convinced this is really a problem as long as the graphics used don’t perform anything other than a purely aesthetic function.

    The IE6 jumping around thing seems to be quite common and I’m not sure if it is necessarily an indication of conflict in the css. It would be interesting to know if anyone has a definitive answer for this one, or is it just a bug in IE?
    Very useful article, thanks!

    Copy & paste the code below to embed this comment.
  7. can you?

    Copy & paste the code below to embed this comment.
  8. What you created is simply amazing. I think many designers should do their best to avoid images and javascript where possible. I read your article and then used it for 300 items, imagine how long it would take to do them using images (300+300(onmouseover))!!

    Copy & paste the code below to embed this comment.
  9. In the specific case of a list of links that appear inline in a paragraph, what’s the point in defiling them as a list with <ul> and then using CSS to take away every aspect that makes such a list different than just putting the links in the paragraph? I am having trouble seeing where the advantage is.

    Copy & paste the code below to embed this comment.
  10. Hey nice article there, I’ve used many of your methods mentioned :)

    Copy & paste the code below to embed this comment.
  11. I’ve gotton the pure-CSS popup/hierarchical lists to work fine (in netscape 7) using ul/li, etc. However, the same approach fails when trying to use nested span’s instead of lists. I.e., the hover property doesn’t seem to stay set for the parent box when the mouse moves into the child “popup” box. It only works if thoses boxes happen to be lists/items.

    Copy & paste the code below to embed this comment.
  12. Mark Newhouse declares:

    “When using these characters, like », it is necessary to encode them as their escaped HEX equivalents.”

    This is false. In all levels of CSS, the right-pointing double angle quotation mark (U+00BB, “»”) may appear unescaped. As of CSS level 2, the only characters that require escaping when in a string are the string delimiters and control characters. Readers should obtain the details directly from the CSS specifications (a good start being http://www.w3.org/TR/CSS21/syndata.html ).

    Even when characters do require escaping, the escape does not have to be a hexadecimal number. The four characters

    “\”“

    form a perfectly legitimate CSS string, with the two middle characters representing one quotation mark (U+0022).

    Copy & paste the code below to embed this comment.
  13. Did anyone come up with a fix for the jumping problem in IE? What does M. Elford mean when he says “The menu system doesn’t jump when taken out of the ALA code framework”
    What would I have to do?
    This is a beautiful menu -thanks for the clean simplicity of the design!

    Copy & paste the code below to embed this comment.
  14. I am starting to develope my webpage which hopefully will include some freeware php scripts. I was just curious if anyone knew of any problems with validating pages with php scripts?
    Cheers
    James

    Copy & paste the code below to embed this comment.
  15. I hope someone can help. I have set up a simple list of navigation links for my site – and I used the instructions presented here to make the list appear HORIZONTAL, instead of the default vertical. To do this, I simple used “display: inline”

    Now, each “<li>” is a link. To make the link active for the FULL WIDTH of the div, how can I do that? To do it with a VERTICAL, or default list, I’d simply use “display: block” But how do you make the link active for the full width on a horizontal list?

    Right now the link just works around the actual text. Each “<li>” has padding applied and also a rollover background color change.

    Copy & paste the code below to embed this comment.
  16. The “pipe” example does not seem to work in IE 5.0. The LIs get pushed together, e.g.

    item1item2item3item4
    instead of
    item1 item2 item3 item4

    IE 5.0 ignores horizontal padding applied to LIs, as well as horizontal margins.

    Anyone know how to work around this?

    Copy & paste the code below to embed this comment.
  17. wow, excellent solution and I really liked the real world example…
    Thanks for showing an easy to do something that I’ve doing using table for years.

    Copy & paste the code below to embed this comment.
  18. I don’t know if this fixes the IE 5.0 bug (I suspect it doesn’t), but there is a simpler way to make an inline menu:

    #nav {background-color:green;padding:10px 0px}

    #nav a {text-decoration:none;color:#fff;padding:10px 15px}

    #nav a:hover {background-color:red}

    ——————————
    <br /> &lt;div id=&#8220;nav&#8221;&gt;<br /> &lt;a&gt;item 1&lt;/a&gt;<br /> &lt;a&gt;item 2&lt;/a&gt;<br /> etc.<br /> &lt;/div&gt;<br />

    Copy & paste the code below to embed this comment.
  19. http://www.gazingus.org/dhtml/?id=109

    Copy & paste the code below to embed this comment.
  20. Any way to get nested lists to validate? Or a CSS alternative that doesn’t just put an indent between the disc and the test for that line?

    Copy & paste the code below to embed this comment.
  21. 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.
  22. 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.
  23. 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.
  24. Very nice site! Much good information in here

    Copy & paste the code below to embed this comment.
  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. 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.
  30. 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.
  31. 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.
  32. 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.
  33. Great thanks, this is what I was looking for :)

    Copy & paste the code below to embed this comment.
  34. 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.
  35. 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.
  36. 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.
  37. 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.
  38. 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.
  39. 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.
  40. Seems as both bugs are fixed / there are workarounds in this thread.

    Copy & paste the code below to embed this comment.
  41. 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.
  42. 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.
  43. 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.
  44. Where can I find the thread of my question?

    Copy & paste the code below to embed this comment.
  45. 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.
  46. 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.
  47. 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.
  48. 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.
  49. 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.
  50. 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.
  51. Awesome work on this article. It was a great help to me.

    Copy & paste the code below to embed this comment.
  52. 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.
  53. 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.
  54. 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.
  55. 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.
  56. 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.
  57. 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.
  58. 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.
  59. 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.
  60. 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.
  61. 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.