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 ArticleEli 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