With regards to the horizontal lines only appearing every other button in Mozilla.
I copied the code and pasted it into a demo page, everything works properly there. I suspect that the code is in conflict with something on the ALA site.
Copy & paste the code below to embed this comment.
Jobeleca
I am curious as to whether or not the margins and padding of a box can be colored. If so, that would dramatically cut down on the number of nested div boxes needed for some simple effects.
It’s interesting in that it uses an H1 tag for the name of the site
(like a classic old style page) but refines h1 to include an image rather than text… Sounds wonderful to me.
Alistapart folks – can you write a new tutorial based on the concept,
you know, advantages and disadvantages, how to go around them.
I like the h1 because it should help with the search engines… :)
Ok, I’ve set up an inline list (unordered) as a menu across the top of my site.
I placed it in a table cell (using XHTML transitional), and gave it a background color. The list shows up right in the middle of the cell in Moz 1.1, but it floats to the top in IE6. I changed the cell’s valign to bottom but it doesn’t do anything. Has anybody else noticed this?
Copy & paste the code below to embed this comment.
Wolverine
Can we have some article about Content Management Systems (like phpnuke, postnuke, etc) and CSS? These systems tend to be heavily tables based and it’s a pain to get them to be pure CSS. Any hints and tips?
Copy & paste the code below to embed this comment.
John Pitcairn
So … how to handle nested lists – is there an HTML-compliant way of doing this? A <ul><li><ul><li>…</li></ul></li></ul> nested inside <UL><LI> isn’t legal, is it?
I’m a CSS newbie and I’m confused by the example’s use of the “>” character in the html>body selector. When I check that CSS code through Web Design Group’s CSSCheck, I get this error:
Selectors may contain only the characters A-Z, a-z, 0-9, Unicode 161-255, hyphens, or escaped Unicode characters as numeric codes.
Katie, The checker you used probably works with only CSS1 selectors. Compare CSS1 selectors at <http://www.w3.org/TR/REC-CSS1#contextual-selectors> with CSS2 selectors at <http://www.w3.org/TR/REC-CSS2/selector.html>. You might also find this page useful: <http://gallery.theopalgroup.com/selectoracle>. It translates CSS selectors into plain English (or Spanish). Amarnath
Links messed up in previous post, sorry. http://www.w3.org/TR/REC-CSS1#contextual-selectors http://www.w3.org/TR/REC-CSS2/selector.html http://gallery.theopalgroup.com/selectoracle/ Amarnath
Copy & paste the code below to embed this comment.
Andrej Golovachev
I advice all developers to keep their site’s support for Netscape 4.x at functionality level. E.g. you design may crash, but all functions will be accessible. That’s how were do now in our studio
Copy & paste the code below to embed this comment.
can someone please tell me the current background and link color being used on www.zeldman.com? the faq says that the stylesheets are freely available, but where are they located? thanks
Mozilla consistently has 1px rounding errors, as noted by Big John above. His page describes the problem well, the same thing can happen horizontally, as can be seen at http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html (look for the punchout on the right, the black border sticks out 1px) and on my defunct mozilla news page at http://grayrest.com/moz when the browser width is about 1024, changing the width causes this to fluctuate so if you don’t see it try changing the width of your browser.
Copy & paste the code below to embed this comment.
MyDimension
to the person who mentioned he had trouble getting list to be 14%:
i have made a list which i use for vertical navigation. the list resides in a sidebar that is 20% of the body. here is my CSS for my list:
ul.menu {
width: 90%;
list-style: none;
margin: 0px auto 0px auto;
padding: 0px;
border: none;
text-align: center;
}
ul.menu li {
text-align: left;
margin-bottom: 2px;
}
Copy & paste the code below to embed this comment.
John Keller
Ok, first, I’m really liking the list+css combo for nav. However, I am having issues with inline lists. The one that is really bugging me is that there is a space between the list items that I cannot seem to get rid of when the list is inline.
For instance, I have a list I’ve set to inline with each item having a border. There is a space between each item, outside of the border, of a couple of pixels. Is there a standard work around for this that anyone knows of?
Copy & paste the code below to embed this comment.
Chris
Love the article.
When supplying a custom image for the bullet via list-style-image or list style, is it possible to set the vertical alignment of that bullet?
Currently, the custom bullet bottom is aligned with the middle of the LI text. I would like to get them both valign=bottom.
Copy & paste the code below to embed this comment.
Arjen Meijer
I think the design is very smart, but has just one flaw.
We all have to write pages that look good in:
a. browsers without css support (e.g. ipaq)
b. browsers without javascript turned on (e.g. security bugs)
c. browsers without proper dom2 support (e.g. netscape 4.x)
d. browsers that support everything
(For example, http://www.alforto.com, will display correct on all browsers.)
Well, this design brakes on browsers with javascript turned off. <li> elements can not be accessed because they are hidden in the css and there is no way to make these elements display.
Oke, change .menu{ display: hidden into block and problem disappears. But now script is not working right the first time.
A related problem is that an <ul> has no meaning with javascript, but without it has. It will try to load a html page.
Copy & paste the code below to embed this comment.
Paul Watson
Fantastic article, and it really helped me in writing my own UL/LI DHTML menu article over at another site (email me if you want the link, don’t want to cross post on here :))
Anyway, on a related note I have run across an odd little “bug” which I cannot find any references to sorting out on the web. So hopefully the brains around here could help (and spread the knowledge.) I hope this is suitable for this forum, if not please ignore.
I have a UL/LI menu arrangement which works well but it relies on two images in the rollover sequence, an on and off effect. They are defined like so:
The problem though is that they do not seem to pre-load properly. I inserted some pre-load script but to no avail. When I mouseover the LI items the images are pulled from the server, even the off image!
However if I use JavaScript to swap the images then pre-loading works fine, but of course that just negates the whole beauty of the a:hover feature.
I noticed the jumping, as well as Netscape drawing every other dividing line.
1. To fixing jumping: remove borders, padding, etc.
2. To fix the every other line problem, move the border from the bottom to the top. It does look a little different, but it works!
#button li {
border-top: 1px solid #90bade;
margin: 0;
}
See it in action on my site:
http://www.supernaturalwoman.com
I’ve tried it on Explorer 5.5, Netscape 7, and Opera 7 under Windows.
Great article. To fix the jumping problem, get rid of the left and right border. To fix the every other line problem in Netscape, flip the border from the bottom to the top. Looks very similar, and it works!
I’m using a list item image that’s 10px wide (the fact that it is wider than a standard bullet might be important) .
IE6 and M121 both render the list as expected using the margin-left AND padding-left rule described by eric meyer.
So far so good.
However, O7 fails to push the text to the right along with the added width of the image (over the standard bullet). I mention this because it looks fine with the standard bullet. In other words, Opera seems to have a “constant” padding between the image and the text, no matter what.
This is the css I’m using:
ul {
margin-left: 19px;
padding-left: 0;
list-style-type: square;
list-style-image: url(”../graphics/list01.gif”);}
ul li {
margin: 10px 0;}
The ul is contained within the same div as the paragraphs. Evidently the div settings do not cause the problem.
So…what should I do? I am DESPERATE!!! And yes, I have tried everything (short of uninstalling Opera… )
this is a direct implementation of this article’s horizontal list navbar. the ONLY thing added were links (a href’s). All’s well in Mozilla browsers and IE PC 5.5 +
Copy & paste the code below to embed this comment.
Shawn J
I am trying to design two sites right now and I’d really like to NOT use tables for layout. My Graphic Designer has a tabbed design…I am trying to get close with CSS, but I can’t seem to figure out a good way to degrade on NS4? The majority of our audience is high school students, who seem to use NS4 (at least 70% of our hits at last check). I have server-side scripting at my disposal (ColdFusion), should I browser sniff and use alternate layouts? Any suggestions or links to help are greatly appreciated.
BTW: Great article, this may be my new favorite site.
Copy & paste the code below to embed this comment.
DC
When I move my mouse over the stack of blue buttons (in the example from http://www.alistapart.com/stories/taminglists/) in IE6, they jump to the left about 40px or so. The “real” example at http://www.assetsurveillance.com.au/ doesn’t do this. I am curious to know why….
Hey there. I tried to remove the left indent of a list as described under Positioning. I did it exactly as the article tells you to do. Looks fine in IE, but in Mozilla it doesn’t appear to be moving to the left. I am doing something wrong or is this just evil non-compliance? Please help me out :)
hi, I choosed for using lists for some hyperlinks in my navigation menu, lists work fine with ie, but netscape and opera place the links on top of eachother… how comes ? my stylesheet page looks like this for the <ul> : ul.menulinks {
list-style: none;
margin-left: 1%;
text-align: left;
padding: 0;
}
internet explorer gives each link on a different line, opera or netscape doesn’t…
Copy & paste the code below to embed this comment.
Matt
I googled here, which turned out to be exactly the right place, but I didn’t find my own issue addressed. I have a nav-menu which is a series of anchors in boxes, but the :hover background color only comes into play when the mouse is over the text, not when it’s over the trailing whitespace. It’s the same with this article’s menu.
Can anyone think of a solution to make the entire box “hot”?
Anyone fully knowledgeable on ASP, Databases, Web Design and CSS Stylesheets? And got some spare time on your hands? If so, email me at the address WEBMASTER@BLASTWAVE.ORG.UK – ANY contact will be greatly appreciated, so please get back to me.
I am just a highschool senior, so my understanding of the syntax may not be uber high but:
#button li {
would it be more appropriate to tag it:
#button ul li {
My reasoning:
1. Browsers stink – they may mess up with nested tags too often, which is a reality now and later – the li’s might be misinterpreted by a weak browser because they are not directly under the div
2. I believe that references the items more specifically
3. It would be consistent with the majority of the other hiarchel (sp?) designations in the article.
Nit picking but hey :) I liked the final example – that was one of the few good examples of css seperating style/content while using actual style.
Copy & paste the code below to embed this comment.
Typically a horizontal menu list has a pipe character (|) to separate items. This is mentioned in the list.
I just wanted to suggest people look at using a colon (:) as a separator. The reason being that some screen-readers will pause in their translation when reaching a colon whereas a pipe character does not generate this action.
So using a semi-colon provides better structure for screen readers.
Copy & paste the code below to embed this comment.
You’ve got padding being applied to an inline element.
Modern (v6+) browsers will apply this padding, but will not alter the parent box of the inline element to add space for the extra padding.
Basically vertical padding becomes useless.
Which is why, if you want padding around your elements, you should set list items to display inline.
Instead I recommend floating them with width set to auto. This works surprisingly well in legacy browsers. The only issue I’ve found with this is Opera 7 has some issues floating the list items while Opera 6 renders it perfectly. Go figure.
Copy & paste the code below to embed this comment.
underdog
Really liked the article.. Great job! I used it on a site for work and replaced a bunch of horrible
‘s and links. Time to scour for more great articles!
I’m using the list style you mentioned here for a project I’m working on. Works great, except when I later set up bulleted lists to use a graphical bullet, the graphical bullet started also appearing to the left of my left navigation (happened on Windows, not Mac). Isn’t there a way to accomplish what you’ve described without hijacking other bulleted lists?
Copy & paste the code below to embed this comment.
James
Fantastic article. Its strange how css still manages to cause me so much grief though, – getting things to line up as you want. You have to be a freaken guru to make things work.
It’d be great to see an online resource containing a bunch of navigation elements, from vertical, to horizontal, to tab-like, to multicoloured, to rollover effects etc etc… much like the multi-column layout resources.
If I get anywhere I may even post it myself :)
I really like how stopdesign.com does theirs, but there is a lot of css markup to make it look like that. I’d like something simpler.
Copy & paste the code below to embed this comment.
Jean-Marie
I’have been starting in writing HTML for a few weeks, and I explore the numerous web pages and sites exposing code, Javascript and so on. Thank you for the detailed lesson on lists, I’ll let you know what I have done with this. Thank you in advance, Jean-Marie, France
Nice code, but when trying out the final blue block with full color styles, it jumps left on first mouseover of any of the buttons. I guess this wouldn’t be a problem if the whole thing was in another table, but just thought you should know. Maybe it’s centred on the page initially and your code is resetting it left justified?
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.
David
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.
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.
Jamie Mackay
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.
Chris
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))!!
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.
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.
Etan Wexler
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.
Becky
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.
James MacLeod
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.
Matt
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 FULLWIDTH 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.
David
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.
jude
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? :-)
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?
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.
Buddie
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.
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.
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?
Copy & paste the code below to embed this comment.
eric
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?
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.
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>
Copy & paste the code below to embed this comment.
Al
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.
Shane
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 ?
Copy & paste the code below to embed this comment.
Chris
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.
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.
Copy & paste the code below to embed this comment.
Todd
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.
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?
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?
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:
Copy & paste the code below to embed this comment.
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.
Copy & paste the code below to embed this comment.
zpunktled
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?
Copy & paste the code below to embed this comment.
DJ
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.
DJ
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.
dannypoo
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.
Copy & paste the code below to embed this comment.
Greg
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?
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?
Copy & paste the code below to embed this comment.
Ron
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.
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.
Treeless Hippie
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:
181 Reader Comments
Back to the ArticleJobeleca
With regards to the horizontal lines only appearing every other button in Mozilla.
I copied the code and pasted it into a demo page, everything works properly there. I suspect that the code is in conflict with something on the ALA site.
Jobeleca
I am curious as to whether or not the margins and padding of a box can be colored. If so, that would dramatically cut down on the number of nested div boxes needed for some simple effects.
Wolverine
Here’s another good CSS tutorial I found on the Internet:
http://www.digital-web.com/tutorials/tutorial_2002-06.shtml
It’s interesting in that it uses an H1 tag for the name of the site
(like a classic old style page) but refines h1 to include an image rather than text… Sounds wonderful to me.
Alistapart folks – can you write a new tutorial based on the concept,
you know, advantages and disadvantages, how to go around them.
I like the h1 because it should help with the search engines… :)
Alex Morales
Ok, I’ve set up an inline list (unordered) as a menu across the top of my site.
I placed it in a table cell (using XHTML transitional), and gave it a background color. The list shows up right in the middle of the cell in Moz 1.1, but it floats to the top in IE6. I changed the cell’s valign to bottom but it doesn’t do anything. Has anybody else noticed this?
loki
Excellent article, it certainly cleared up some design issues for me.
One more question:
How does one control the huge gap between the preceding text and the first list item in a basic page?
ei:
random text
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
any ideas?
Thanks again!
Kevin W
RE: loki, http://www.alistapart.com/stories/taminglists/discuss/3/#ala-1051
Loki, just use:
ul { margin-top: 0;}
You might also want to do margin-bottom: 0 as well.
Alex Morales
Re http://www.alistapart.com/stories/taminglists/discuss/3/#ala-1050
Just figured it out, thanks anyways!
Wolverine
Can we have some article about Content Management Systems (like phpnuke, postnuke, etc) and CSS? These systems tend to be heavily tables based and it’s a pain to get them to be pure CSS. Any hints and tips?
John Pitcairn
So … how to handle nested lists – is there an HTML-compliant way of doing this? A <ul><li><ul><li>…</li></ul></li></ul> nested inside <UL><LI> isn’t legal, is it?
Advice appreciated…
John Pitcairn
My mistake … <ul><li><ul><li>…</li></ul></li></ul> is OK.
<ul><li>…</li><ul><li>…</li></ul></ul> isn’t. Which is what I was trying to validate. Doh!
katie
I’m a CSS newbie and I’m confused by the example’s use of the “>” character in the html>body selector. When I check that CSS code through Web Design Group’s CSSCheck, I get this error:
Amarnath Santhanam
Katie, The checker you used probably works with only CSS1 selectors. Compare CSS1 selectors at <http://www.w3.org/TR/REC-CSS1#contextual-selectors> with CSS2 selectors at <http://www.w3.org/TR/REC-CSS2/selector.html>. You might also find this page useful: <http://gallery.theopalgroup.com/selectoracle>. It translates CSS selectors into plain English (or Spanish). Amarnath
Amarnath Santhanam
Links messed up in previous post, sorry. http://www.w3.org/TR/REC-CSS1#contextual-selectors http://www.w3.org/TR/REC-CSS2/selector.html http://gallery.theopalgroup.com/selectoracle/ Amarnath
Fletch
After 100s of failed experiments I have given in a am looking for help.
Is it possible to use create something like this using UL and CSS.
http://adamfletcher.com/ul/
Alex Hernandez
This one is just to thank you for all that good stuff you always give us.
.::AleX::.
Dominocode.Net
Big Gay Al
An excellent article that was exactly what I was looking for. Very useful and simple to implement.
My only bitch would be Netscape 4.5 on the PC, it can’t read it at all!
Big Gay Al
An excellent article that was exactly what I was looking for. Very useful and simple to implement.
My only bitch would be Netscape 4.5 on the PC, it can’t read it at all!
Andrej Golovachev
I advice all developers to keep their site’s support for Netscape 4.x at functionality level. E.g. you design may crash, but all functions will be accessible. That’s how were do now in our studio
Simon
Hi
I’m following on in what I think is the spirit of the articles in using lists for nested navigation.
How do the panel suggest I deal with navigation nested more than one level deep? ie:
- Section 1
– section 1: subsection a
– section 1: subsection b
– section 1: subsection c
– Section 2
– section 2: subsection a
…etc
Assuming that the sections should be in list format, I tried the following and would appreciate thoughts, comments and feedback…
Validation chokes on this:
<ul>
<li><h2>Main Administration</h2></li>
<ul>
<li>Summary Page</li>
<li>Change Main Password</li>
<li>Change MySQL Password</li>
<li>Log Out</li>
</ul>
</ul>
because the nested UL is not contained within an LI tag.
However this validating code:
<ul>
<li><h2>Main Administration</h2></li>
<li><ul>
<li>Summary Page</li>
<li>Change Main Password</li>
<li>Change MySQL Password</li>
<li>Log Out</li>
</ul></li>
</ul>
does not look right (when unstyled) with the floating bullet above the first list.
can someone please tell me the current background and link color being used on www.zeldman.com? the faq says that the stylesheets are freely available, but where are they located? thanks
MacOpera 6 Beta Tester
testing… 1 2 3 4 5 6
grayrest
Mozilla consistently has 1px rounding errors, as noted by Big John above. His page describes the problem well, the same thing can happen horizontally, as can be seen at http://www.meyerweb.com/eric/css/edge/boxpunch/demo.html (look for the punchout on the right, the black border sticks out 1px) and on my defunct mozilla news page at http://grayrest.com/moz when the browser width is about 1024, changing the width causes this to fluctuate so if you don’t see it try changing the width of your browser.
MyDimension
to the person who mentioned he had trouble getting list to be 14%:
i have made a list which i use for vertical navigation. the list resides in a sidebar that is 20% of the body. here is my CSS for my list:
ul.menu {
width: 90%;
list-style: none;
margin: 0px auto 0px auto;
padding: 0px;
border: none;
text-align: center;
}
ul.menu li {
text-align: left;
margin-bottom: 2px;
}
ul.menu li a {
display: block;
padding: 0px 0px 0px 1.5em;
margin: 0px;
border-left: 2px solid;
border-right: 2px solid;
width: 100%;
}
ul.menu li>a {
width: auto;
}
John Keller
Ok, first, I’m really liking the list+css combo for nav. However, I am having issues with inline lists. The one that is really bugging me is that there is a space between the list items that I cannot seem to get rid of when the list is inline.
For instance, I have a list I’ve set to inline with each item having a border. There is a space between each item, outside of the border, of a couple of pixels. Is there a standard work around for this that anyone knows of?
Chris
Love the article.
When supplying a custom image for the bullet via list-style-image or list style, is it possible to set the vertical alignment of that bullet?
Currently, the custom bullet bottom is aligned with the middle of the LI text. I would like to get them both valign=bottom.
Thanks,
-=Chris
Simon
Hooray!
Dave Lindquist solves the problem (see my post a couple above) very neatly, validly and accessible at http://www.gazingus.org/dhtml/?id=109
(and again) Hooray!
Good eye opener
testing 1 2 3 4 5 6
Martin
The nested list is logically a part of the first list item of the containing list. So the code you want is:
<ul>
<li><h2>Main Administration</h2>
<ul>
<li>Summary Page</li>
<li>Change Main Password</li>
<li>Change MySQL Password</li>
<li>Log Out</li>
</ul>
</li>
</ul>
Arjen Meijer
I think the design is very smart, but has just one flaw.
We all have to write pages that look good in:
a. browsers without css support (e.g. ipaq)
b. browsers without javascript turned on (e.g. security bugs)
c. browsers without proper dom2 support (e.g. netscape 4.x)
d. browsers that support everything
(For example, http://www.alforto.com, will display correct on all browsers.)
Well, this design brakes on browsers with javascript turned off. <li> elements can not be accessed because they are hidden in the css and there is no way to make these elements display.
Oke, change .menu{ display: hidden into block and problem disappears. But now script is not working right the first time.
A related problem is that an <ul> has no meaning with javascript, but without it has. It will try to load a html page.
Has anybody a hint how to solve this problems?
Arjen
Paul Watson
Fantastic article, and it really helped me in writing my own UL/LI DHTML menu article over at another site (email me if you want the link, don’t want to cross post on here :))
Anyway, on a related note I have run across an odd little “bug” which I cannot find any references to sorting out on the web. So hopefully the brains around here could help (and spread the knowledge.) I hope this is suitable for this forum, if not please ignore.
I have a UL/LI menu arrangement which works well but it relies on two images in the rollover sequence, an on and off effect. They are defined like so:
a.item
{
background-image: url(../img/btn_arrw1_off.gif);
background-position: 15px 6px;
}
and
a.item:hover
{
background-image: url(../img/btn_arrw1_on.gif);
background-position: 15px 6px;
}
The problem though is that they do not seem to pre-load properly. I inserted some pre-load script but to no avail. When I mouseover the LI items the images are pulled from the server, even the off image!
However if I use JavaScript to swap the images then pre-loading works fine, but of course that just negates the whole beauty of the a:hover feature.
Any help appreciated, ta :)
Peter Jones
An absolutely terrific article!
I noticed the jumping, as well as Netscape drawing every other dividing line.
1. To fixing jumping: remove borders, padding, etc.
2. To fix the every other line problem, move the border from the bottom to the top. It does look a little different, but it works!
#button li {
border-top: 1px solid #90bade;
margin: 0;
}
See it in action on my site:
http://www.supernaturalwoman.com
I’ve tried it on Explorer 5.5, Netscape 7, and Opera 7 under Windows.
Peter
Peter Jones
Great article. To fix the jumping problem, get rid of the left and right border. To fix the every other line problem in Netscape, flip the border from the bottom to the top. Looks very similar, and it works!
See it: http://www.supernaturalwoman.com
Peter
Lars
I’m using a list item image that’s 10px wide (the fact that it is wider than a standard bullet might be important) .
IE6 and M121 both render the list as expected using the margin-left AND padding-left rule described by eric meyer.
So far so good.
However, O7 fails to push the text to the right along with the added width of the image (over the standard bullet). I mention this because it looks fine with the standard bullet. In other words, Opera seems to have a “constant” padding between the image and the text, no matter what.
This is the css I’m using:
ul {margin-left: 19px;
padding-left: 0;
list-style-type: square;
list-style-image: url(”../graphics/list01.gif”);} ul li {
margin: 10px 0;}
The ul is contained within the same div as the paragraphs. Evidently the div settings do not cause the problem.
So…what should I do? I am DESPERATE!!! And yes, I have tried everything (short of uninstalling Opera… )
Boris Anthony
See: http://www.levendis.com/listnav/
this is a direct implementation of this article’s horizontal list navbar. the ONLY thing added were links (a href’s). All’s well in Mozilla browsers and IE PC 5.5 +
On the mac, IE 5.2, caput.
Pleeeeaaase! Someone help! :)
Thanks!
B.
Shawn J
I am trying to design two sites right now and I’d really like to NOT use tables for layout. My Graphic Designer has a tabbed design…I am trying to get close with CSS, but I can’t seem to figure out a good way to degrade on NS4? The majority of our audience is high school students, who seem to use NS4 (at least 70% of our hits at last check). I have server-side scripting at my disposal (ColdFusion), should I browser sniff and use alternate layouts? Any suggestions or links to help are greatly appreciated.
BTW: Great article, this may be my new favorite site.
DC
When I move my mouse over the stack of blue buttons (in the example from http://www.alistapart.com/stories/taminglists/) in IE6, they jump to the left about 40px or so. The “real” example at http://www.assetsurveillance.com.au/ doesn’t do this. I am curious to know why….
Marek
Hey there. I tried to remove the left indent of a list as described under Positioning. I did it exactly as the article tells you to do. Looks fine in IE, but in Mozilla it doesn’t appear to be moving to the left. I am doing something wrong or is this just evil non-compliance? Please help me out :)
wim
hi, I choosed for using lists for some hyperlinks in my navigation menu, lists work fine with ie, but netscape and opera place the links on top of eachother… how comes ? my stylesheet page looks like this for the <ul> : ul.menulinks {
list-style: none;
margin-left: 1%;
text-align: left;
padding: 0;
}
internet explorer gives each link on a different line, opera or netscape doesn’t…
Matt
I googled here, which turned out to be exactly the right place, but I didn’t find my own issue addressed. I have a nav-menu which is a series of anchors in boxes, but the :hover background color only comes into play when the mouse is over the text, not when it’s over the trailing whitespace. It’s the same with this article’s menu.
Can anyone think of a solution to make the entire box “hot”?
Orion
Anyone fully knowledgeable on ASP, Databases, Web Design and CSS Stylesheets? And got some spare time on your hands? If so, email me at the address WEBMASTER@BLASTWAVE.ORG.UK – ANY contact will be greatly appreciated, so please get back to me.
Regards,
Orion – Webmaster :: blastwave.org.uk ::
Samuli
Does anyone know how to decrease the space between bullets and list items???
leo meyerovich
I am just a highschool senior, so my understanding of the syntax may not be uber high but:
#button li {
would it be more appropriate to tag it:
#button ul li {
My reasoning:
1. Browsers stink – they may mess up with nested tags too often, which is a reality now and later – the li’s might be misinterpreted by a weak browser because they are not directly under the div
2. I believe that references the items more specifically
3. It would be consistent with the majority of the other hiarchel (sp?) designations in the article.
Nit picking but hey :) I liked the final example – that was one of the few good examples of css seperating style/content while using actual style.
Typically a horizontal menu list has a pipe character (|) to separate items. This is mentioned in the list.
I just wanted to suggest people look at using a colon (:) as a separator. The reason being that some screen-readers will pause in their translation when reaching a colon whereas a pipe character does not generate this action.
So using a semi-colon provides better structure for screen readers.
You’ve got padding being applied to an inline element.
Modern (v6+) browsers will apply this padding, but will not alter the parent box of the inline element to add space for the extra padding.
Basically vertical padding becomes useless.
Which is why, if you want padding around your elements, you should set list items to display inline.
Instead I recommend floating them with width set to auto. This works surprisingly well in legacy browsers. The only issue I’ve found with this is Opera 7 has some issues floating the list items while Opera 6 renders it perfectly. Go figure.
underdog
Really liked the article.. Great job! I used it on a site for work and replaced a bunch of horrible
‘s and links. Time to scour for more great articles!
BoyWithK9
I’m using the list style you mentioned here for a project I’m working on. Works great, except when I later set up bulleted lists to use a graphical bullet, the graphical bullet started also appearing to the left of my left navigation (happened on Windows, not Mac). Isn’t there a way to accomplish what you’ve described without hijacking other bulleted lists?
James
Fantastic article. Its strange how css still manages to cause me so much grief though, – getting things to line up as you want. You have to be a freaken guru to make things work.
It’d be great to see an online resource containing a bunch of navigation elements, from vertical, to horizontal, to tab-like, to multicoloured, to rollover effects etc etc… much like the multi-column layout resources.
If I get anywhere I may even post it myself :)
I really like how stopdesign.com does theirs, but there is a lot of css markup to make it look like that. I’d like something simpler.
Jean-Marie
I’have been starting in writing HTML for a few weeks, and I explore the numerous web pages and sites exposing code, Javascript and so on. Thank you for the detailed lesson on lists, I’ll let you know what I have done with this. Thank you in advance, Jean-Marie, France
Jason
Nice code, but when trying out the final blue block with full color styles, it jumps left on first mouseover of any of the buttons. I guess this wouldn’t be a problem if the whole thing was in another table, but just thought you should know. Maybe it’s centred on the page initially and your code is resetting it left justified?
Hannes
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.
David
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.
SSFSX17
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.
neefroel
when you have a{display:block} and you specify “height:1em”, then the divs are also active for the whole width in IE/Win.
MEKI
thjis website is cool
Jamie Mackay
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!
paul
can you?
Chris
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))!!
Electrical Engineer
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.
Renegade
Hey nice article there, I’ve used many of your methods mentioned :)
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.
Etan Wexler
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).
Becky
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!
James MacLeod
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
Matt
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.
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?
Azizur
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.
ATR
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 /> <div id=“nav”><br /> <a>item 1</a><br /> <a>item 2</a><br /> etc.<br /> </div><br />Balu
http://www.gazingus.org/dhtml/?id=109
nialoo
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?
Tom
Thanks for the article. Its time I ventured into this scary area of web design once and for all.
David
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?
jude
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? :-)
Jonas
Very nice site! Much good information in here
Pete Nelson
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?
Ben Hollis
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.
Buddie
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.
Neil Hillman
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!
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
Joenco
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
eric
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
David
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.
eric
Great thanks, this is what I was looking for :)
Arran
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
Arran
I’ve done it… simply missed a ; off a line and now that it is corrected its working like a treat
Al
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!
Shane
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.
Chris
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.
Andy
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.
Andy
Seems as both bugs are fixed / there are workarounds in this thread.
Duncan
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.
Todd
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.
Ben Ille
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?
Ben Ille
Where can I find the thread of my question?
Ben Ille
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?
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.
Ben Ille
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;
}
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?
zpunktled
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
DJ
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.
Eli Bolotin
Awesome work on this article. It was a great help to me.
DJ
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; }
dannypoo
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
Greg
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
Dan
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
Ron
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.
tim
Anyway of making the button bgcolour staying on when clicked? And only having the last button clicked retain the new background colour value?
Ron
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.
kumar
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.
Matt
Does anyone have a list of the browsers that support custom images for bullet points please? Is it purely IE?
Treeless Hippie
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