Forum Moderators: not2easy
Isn't there some way to get decent list-rendering, using bullets or images for list markers, so that the margins/padding for lists can be set at will without the list marker rendering outside the left edge of the <ul> element?
Surely everyone who's worked much with CSS has experienced this - you need a list, complete with bullets, but the default indent for list items is simply too much. In fact, no indent is really what's necessary.
Easy enough, just set
margin:0;padding: 0;Right, but the problem is that it's definitely NOT the right result. Because, as we all know, the list marker, be it numbers, bullets, or images, always renders outside the left edge of the <ul> element - and even outside a parent containing element! This can obviously mess up a layout big time by either hiding the list markers altogether, or rendering them on top of other page elements.
Of course, you can get the right effect by applying
list-style-position: inside;outsideThe object seems simple enough; just to make this...
<ul>
<li>First List Item</li>
<li>Second List Item</li>
</ul>
...render the same as this:
<table>
<tr>
<td><img src="bulletimage.gif"></td>
<td>First List Item</td>
</tr>
<tr>
<td><img src="bulletimage.gif"></td>
<td>Second List Item</td>
</tr>
</table>
...where each list item would contain enough text to wrap to another line, yet be indented evenly on each line with the bullet out to the left, yet the bullets nice and even with the left edge of the containing element.
I'm not asking too much, am I? But I can't find a solution to the problem.
Sorry for the ranting nature of this post - I guess I'm feeling a little stressed about this! ;)
where each list item would contain enough text to wrap to another line, yet be indented evenly on each line with the bullet out to the left, yet the bullets nice and even with the left edge of the containing element
Matthew, I may be misunderstanding your concern, but I get very reliable cross-browser results with the following...
1. Set margin and padding on the ul to 0. This moves the li content all the way to the flush left of the container. As you describe, bullets sit outside of the container.
2. Change one or the other (margin or padding) for the left side to 20px (15px puts the bullet touching the container edge, but 20px looks better). It doesn't matter which property gets the value as long as the other one is zeroed out.
The problem in most situations is that FF and IE use different properties to clear the space for the marker box, so giving one an explicit value but leaving the other at default messes up one or the other browser. With both values at zero, then one explicitly set, both handle the code the same.
Of course, if you use padding, the bullets appear within the UL's content area; if you use margin they appear outside of it (for border and background considerations).
As I said, I see very reliable and nearly identical results (to within a pixel or two, the remaining difference being in the default marker used) between FF and IE and Opera. If there's something I'm missing about your question, however, please say so.
cEM
Test page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
ul{margin:0 0 0 15px;padding:0;background:#369;}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad.</li>
</ul>
</body>
</html>
(Although, come to think of it, why should the padding or margin be applied to the <ul> instead of the <li>? Isn't <li> the element that gets the bullet?)
