[Sage]

Does the box model not apply the same way to list items as it does to other stuff?

I'm asking, because on my site, I've specified that the list items under "Results" have a 10px pixel margin all around. However, when you make the browser window smaller, and the items wrap to the next line, you'll notice that the background of the white list item overlaps with the list items below it, and I don't want that.

Here's the source code for that particular section:

Code:
<ul id="results">
    <li id="winner">Mark&nbsp;&ndash;&nbsp;1'25.851</li>
    <li>Andrew&nbsp;&ndash;&nbsp;1'27.148</li>
    <li>Sage&nbsp;&ndash;&nbsp;1'28.240</li>
    <li>Alex&nbsp;&ndash;&nbsp;1'29.484</li>
  </ul>

And here are the corresponding CSS rules:

Code:
#results li {
	list-style: none;
	display: inline;
	margin: 10px;
	padding: 0;
}

#results li#winner {
	background: #fff;
	padding: 5px;
	font-weight: bold;
}

[clam2000]

probably want to add

Code:
#results {
line-height: 200%;
}

(change 200 to whatever fits your needs... also can be used as em's as itn line-height: 1.5em)
...
Go O'Reilly

--will

[Sage]

Heh, never thought about that! And it definitely works.. thanks!

Still, just out of curiosity, is there an explanation for why margins wouldn't handle it?

[Synotic]

Originally posted by Sage:
Heh, never thought about that! And it definitely works.. thanks!

Still, just out of curiosity, is there an explanation for why margins wouldn't handle it?

I don't believe you can apply margins to inline elements. If you really wanted to, you could reassign your <li> elements as inline-blocks but I don't think that's as well supported.

[redJag]

Also, white-space: nowrap should work for you as well.

[Sage]

Originally posted by Synotic:
I don't believe you can apply margins to inline elements.

Ah, wish someone told me that a year ago when I got started with CSS (though back then I probably didn't even know what "inline elements" meant)... thanks!

Originally posted by redJag:
Also, white-space: nowrap should work for you as well.

Well, I have about 22 other pages like that one, but some have substantially more list items, so I want to let them wrap if necessary.