These are very valuable resources for me
I can use it to improved my portfolio
thanks 
this thread is full of information. Specially good stuff from āStomme poesā and āPaul OāBā.
Sorry, I need to post this somewhere, it cost me waaaay too much time and I almost asked the forums what to do here.
I have a page/site. While menu lists donāt have bullets, I decided to make some in-content lists look nice, Iād add some circle bullets. It looked nice.
Nothing in IE. Any IE.
So! To the googles!
The Googles only mentioned two things: Haslayout and floated lists. I had NEITHER problem.
The code was originally this:
(near the top with my basic reset, as I never ever ever want bullets on menus:)
ul, li {
list-style: none;
}
(I have since discovered that the li setting here which is done for IE is ONLY necessary when IE is in quirks mode which it never is in my case, so later this was changed to just the ul).
ul.capabilities {
display: list-item;
width: 15em;
margin: 10px auto;
}
ul.capabilities li {
list-style: circle;
}
Okay, nobody was floated, and I was explicitly setting a new display for the ul which should have been inherited by the liās. I tried adding
width: 100% to the liās for haslayout. I tried moving display: list-item to the li. I tried float: none just in case this was somehow magically inherited from eaelier lists in IE. I tried adding padding which made all the Modern browers decide that all the list items had to share a single bullet-- in fact ANYTHING I said about the liās as far as colour, background colour, padding, set this nasty thing off.
I did a search here since it would be extra super embarrassing to post the question right after it had been asked somewhere. Well, nobody was asking about setting non-background-image bullets in non-floated lists, however I did run across a thread where someone said something about margins cutting the bullets off. Hmmmm, I thought, my bullets are outside by default. I hate the little indentation done with āinsideā but Iāll try it.
Worked. The auto-margins must be somehow cutting the bullets off? It shouldnāt as this is a 15em-width list and the screen Iām looking at is frickin huge. But stuffing them inside the liās borders seemed to fix it (while adding padding to the left of the li did not).
Current working code:
ul {
list-style: none;
}
(way up at the top for most lists)
ā¦
ul.capabilities {
width: 15em;
margin: 10px auto;
}
ul.capabilities li {
display: list-item;
list-style: circle inside;
width: 100%;
}
* html ul.capabilities li {vertical-align: top;}
The width: 100% does stop the text indenting with āinsideā in IE6 though it makes a problem with vertical aligning, so I kept it in there.
Hope this saves someone some hair-pulling time.
Hi Stomme poes,
Thanks for posting your findings 
IE has a lot of bugs with lists
With your method above using āinsideā will mean that in Firefox the list text will wrap underneath the bullets which is not usually what you want. You have catered for IE by āapplyingā haslayout to the list which stops it wrapping underneath but in other browsers the text will wrap under the bullet and stop the alignment.
When using list that need to be centered I use another approach although it involves 1 line of extra html it is a 100% more reliable and easier to work width and doesnāt need any hacks. Simpy apply the widths and centering to a wrapper element and then apply a left padding or margin to the ul in the nromal way to make space for the disc.
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul {
list-style:none
}
div.test {
width:15em;
margin:10px auto;
}
.test ul {
list-style: circle;
margin:0 0 0 16px;
}
* html ul li {
vertical-align: middle;/* aligns the bullet in ie even though it shouldn't*/
}
</style>
</head>
<body>
<div class="test">
<ul>
<li>testing the list testing the list testing the list testing the list testing the list testing the list testing the list testing the list testing the list testing the list </li>
<li>test</li>
<li>test</li>
</ul>
</div>
</body>
</html>
This leaves the list perfectly aligned and wraps very nicely and works cross browser.
Hi Paul,
With your method above using āinsideā will mean that in Firefox the list text will wrap underneath the bullets which is not usually what you want. You have catered for IE by āapplyingā haslayout to the list which stops it wrapping underneath but in other browsers the text will wrap under the bullet and stop the alignment.
Yesh, I saw this and at one point I did consider two things, an extra container (since it seemed the width and automargins of the list itself was hiding the bullets) or even the old-fashioned centering method (pos-rel left 50%, margin-left: -halfwidth).
/* aligns the bullet in ie even though it shouldnāt*/
Yeah I thought it was pretty weird that, with my short width of 15em, I has some wrapping of the liās and IE6 put the bullets at the bottom (wth?) of the li. IE7 didnāt so I figured, vertical-align.
*Edit, I notice you are not explicitly stating display: list-item with the liās. Isnāt there a browser somewhere who cannot accept list-style on a li if somewhere earlier youāve said All Ulās, list-style: none?
Edit, I notice you are not explicitly stating display: list-item with the liās. Isnāt there a browser somewhere who cannot accept list-style on a li if somewhere earlier youāve said All Ulās, list-style: none?
You havenāt changed the display property of the list so why should you need to re-instate it. list-style and display are separate things.
However you are half right and IE6 will lose the numbering on lists if the element haslayout and adding display:list-item re-instates the numbering.
<!DOCTYPE html PUBLIC ā-//W3C//DTD XHTML 1.0 Strict//ENā āhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdā>
<html xmlns=āhttp://www.w3.org/1999/xhtmlā>
<head>
<meta http-equiv=āContent-Typeā content=ātext/html; charset=utf-8ā />
<title>Untitled Document</title>
<style>
ul {
list-style:decimal
}
li {
width:100%;
display:list-item;/* without this IE6 displays all numbers as number 1.*/
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</body>
</html>
(However there are many other bugs in ie5.x with lists also which may be where you saw the fix before.)
Ah ok. It might have been also on lists where the li was
display: block (where earlier liās were something else)
display: list-item;
because for instance when first menu is floated liās and later a non-floated-li menu comes along and cannot just have float: none.
Iāve only recently started caring because I never ever wanted bullets before, but the circle looks kinda nice in boring content lists, and keeps it cleaner-looking and easier to read when each item can wrap multi-line.
I used the wrapping div and it looks pretty good, Paul. I didnāt try the old-fashioned centering technique thoughā¦ Iām curious but laziness won out : )
I had another post but moved it to Accessibility
i have this quick tip maybe someone doesnt knows it
when you add a style for INPUT
it automatically add the same style for the text and button,
lets say like this:
input {
background-color: #000;
width: 150px;
}
but what if you want to add different styles for a button and for the text input you can do this:
input[type=ātextā] {
background-color: #FFF;
width: 150px;
}
input[type=āsubmitā] {
background-color: #999;
width: 100px;
}
this wont work with IE
but if you add the ie7 fix http://code.google.com/p/ie7-js/
Um, you could also add classes on everyone (not nice, but works in IE6 without JS).
Usually my submits have a class anyway, so Iāve got
input.submit {
stuff;
}
works fine. For funky styled forms, I often let those with the better browsers get the cool forms, while IE6 users just get a regular form. No loss, both are functional. I donāt think itās worth the extra load of JS for forms but others might have a large-enough IE5/6 audience that itās worth it for them to add the JS (or classes).
Thanks for these links - exactly what I have been looking for. I am completely self trained when it comes to website creation, and CSS knowledge is somethig I really strive to learn. I am sick of using tables.
This thread is great thanks!
thanks fo the info ā¦ really helpful !!!
The #17 link gives a malware warning:
- Horizontal Menu using CSS
not sure if itās real or notā¦ just an fyi.
Yea, after having to remove about 3/4ths of the styles from that error page so I can READ it gave me a page not found :).
Link removed anyway - thanks
Lessee, just ran into a browser default I was unaware ofā¦
I had this code:
ul {
list-style: none;
}
laterā¦
#account ul.bullets {
text-align: center;
padding-left: 22px;
}
#account ul.bullets li {
display: list-item;
list-style-type: disc;
margin: .5em 0;
}
So the ulās a block of course, and the liās are blocks and list-item, and the anonymous inline boxes inside the liās (the text) are centered.
In most browsers (Geckos, Opera, IE7 and below) the bullets were right next to the liās text. In Safari, Chrome, and, according to browsershots, IE8, they were way to the left.
Playing around with it, I now have this code:
#account ul.bullets {
text-align: center;
padding: 0 2px;
}
#account ul.bullets li {
display: list-item;
list-style: inside disc;
margin: .5em 0;
}
The defaults for Opera, Gecko and IE under 8 was list-style-position: inside, while Saffy-Chrome and IE8 were defaulting to āoutsideā. Specifying the position (which I donāt think Iāve ever done before) made everyone act the same (also if I set it to āoutsideā everyone then correctly set the bullets out to the far left side).
The IE bug where bullets are hidden doesnāt show up here because the ul has no side margins.
This isnāt a bug I think. People can correct me of courseā¦
Browsers add the margin/padding to allow space for the bullets to appear. If you remove the side margins there is no place for it to appear. Since IE/FF use a different way of providing space it seems logical that if you zero out one of them, the browser wonāt show the bullets. I bet any version of IE would do that.
Just my 2cents (Iām probably off).
This had nothing to do with margins or bullets not showing, merely their placement.
Correct, it is not a bug, but a browser default (like the default margins etc they have) which I was unaware of, and now am, and wanted to share. I did not know that Gecko Opera and IE6 and 7 were defaulted to list-style-position: inside while IE8, Saffy and Chrome were defaulted to list-style-position: outside (which is all it was).
*edit I should post screenshotsā¦ but they should be here on SP and not my server I thinkā¦
I did not know that Gecko Opera and IE6 and 7 were defaulted to list-style-position: inside
They donāt they all default to outside
What you are seeing is the browsers interpretation of where bullets should be placed which isnāt explicitly defined. If the text is centered should the bullet be centred also? Some browsers think yes and some think no.
Setting the display to inside sets the bullet marker to behave as an inline element and then it stays with the text but the text wrapping will be different. If you try with lots of text you will see that the behaviour with inside is different to outside on those centred lists.
I thought āoutsideā meant āoutside the li elementā. In my screenshots, the red border and green background were added only to show where the liās were-- so I saw bullets inside the green and figured, thatās āinsideā.
Dang I hate stretching the page with those large shots, but when I made them smaller they got so blurry you couldnāt see what was going on.
but the text wrapping will be different. If you try with lots of text you will see that the behaviour with inside is different to outside on those centred lists.
Lemme guess, like inlines theyāll wrap when they need to, meaning sometimes a bullet wonāt necessarily stay with its list item.