Horizontal list background does not work on line break...

Hi guys,

I'm having a problem. I have made a horizontal list, and it's working good except for the background image bullets... They work fine, until one of the items goes over to a new line. This "point" will then not get a background image.

Look:






"A" Is the list in a div, and you can see one of the <li> goes over to a new line.

"B" You can see that the bullet background image is not there on the one that has gone onto the new line

"C" is what i would like it to be like. Still going over to the next line, but with an image.

This is my css code:

.mylist  ul {
	font-size: 14px;
	letter-spacing: 1px;
}
.mylist  li {
	display: inline;
	list-style-type: none;
	padding-right: 20px;
	background-image: url(images/dot.gif);
	background-repeat: no-repeat;
	background-position: left 4px;
	padding-left: 14px;
	white-space: pre;
}

Code (markup):

And the html:

<ul class="mylist">
<li>A text item</li>
<li>A text item</li>
<li>A text item</li>
</ul>

Code (markup):

 

Use instead of background image a better way : list-style-type:circle;

Should work

 

You cannot use list-style-type with display: inline

And without display: inline you cannot have a horizontal list (unless you use float left, which is a bad way to do it)

 

You're kinda stuck here, because display: list-item assumes a single line in many browsers. Changing the display state to something else (float, inline) as mentioned above will remove the default display: list-item (which shows bullets) in some browsers while not in others (IE removes bullets when they are floated while FF does not). Because of this discrepancy, background images are usually used.

However when your lines are inline and wrapping, the browsers do not necessarily agree on where the left edge of the inline box is. Is it as tall as both lines? Or not? As far left as the lower line? So the background image may appear in different places (a common IE "bug" when you have the bg image at the END of the line is seen with this problem too).

If you give those list items a border you'll see the problem.
li {
display: inline;
border: 1px solid #f00;
}

cause you have
background-position: left 4px;
what is left on something that wraps? Those boxes aren't square when the things are inline, so there may be two "lefts" : )

You could try display: inline-block with the background image, see how that works out cross-browser. Keep the border for testing edges.

You could try using CSS to insert a bullet character before (or you could try inserting a bullet image before) using.... :before. Not sure which IE (if any) support :before though.

#nameOfList li:before {
content: "\2022";
}

There's absolutely nothing wrong with floating list items, except of course you won't get wrapping lines as floats are a type of block.