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