Webmaster Forum / HTML, CSS, Scripts / CSS / December 2008

<http://www.alistapart.com/articles/taminglists/>?

That particular result won't happen in all browsers. As C A Upsdell
mentioned, browsers do not all use the same method to apply list
indents, nor are they required to.

Set both margin-left and padding-left to specific values, and you'll get
more consistent results. Do that on both the <ul> and <li> elements.

An addendum to my earlier comment.

You should be prepared to do some serious educating.  You need to teach
your client that web page technologies are very different from print
technologies, with different capabilities and constraints.  In
particular, web technologies do not allow the appearance of web pages to
be absolutely controlled, nor is it desirable to do so.

The precise appearance of web pages will depend on the browser, the
monitor, the browser configuration, and individual user preferences.
For example, a common error that IE-oriented designers make is to set
font sizes using absolute units -- e.g. using font-size:12px -- and to
expect the browser to do exactly as they say.  Older versions of IE made
it a bit hard to override such sizes, so many designers have assumed
that the sizes cannot be overridden:  but they can be overridden; and
many pages designed to assume fixed font sizes will break, perhaps
badly, if the user forces a different font size.

I also commented that it is not desirable to try to assert absolute
control over the appearance of pages:  e.g. if someone needs a larger
font to read text clearly -- something not possible with print
technologies -- the user should be able to expand the font size, else
the page is unreadable and useless.

In practice, the only way to assure that pages look exactly as desired
is to use a print technology, e.g. PDF files, instead of HTML pages.

If your client cannot be made to understand this, it may be a good idea
to walk away from him/her, and let someone else face the slings and
arrows of outrageous fortune.

If you really have trouble, use a table Jeff, cross-browser supreme!

The div padding is still there, but the bullets don't care. Bullets hang
off to the left (or right in rtl) of the li block box some
browser-defined amount (it's 8px in Firefox).

They don't care about anything else. It's like they were absolutely
positioned, they just go the same offset from the ul edge regardless.
(apart from some weird effects with floats in some browsers whicj move
the bullet inside the li box right of any left floats, but never mind
that).

If you give ul zero left padding, then the li is 10px from the padding
edge of the div, and the bullet is left of the li. But 10px is not
enough room for the bullet.

Most browsers use 40px left *margin* on ul to leave a gap for the
bullets, (because that's what the spec suggests) but Firefox uses 40px
left *padding* on ul instead. Not wrong just different. 40px is quite a
lot so it gives you both indentation and enough room for the bullets.

So if you're going to adjust padding or margin on ul, always set both
for greater cross-browser compatibility.

But in this case you're doomed anyway. You want to lose the indentation
but keep room for the bullets but you don't know and can't control
exactly where the bullet goes. And unless it's an image, you also don't
know how big it is.

If you don't want to use inside bullets because you want the text to
wrap like outside bullets, but you want the bullets at the left of the
container, use a table. Ask dorayme why all lists are tables anyway.

It was possibly talking about whether the 40px default stylesheet rule
is for ul padding or ul margin.

No.

If the List is desired to appear as close as possible to all browsers,
then instead of using List I would not use Tables, but use a div wrapper
inside of which a floated simulated marker image with a clear:left and
allow the subsequent text, with a left margin applied, to flow to the
right of it and repeat this for each simulated List Item inside the wrapper.

Ha!
I had exactly that problem today, and found this fabulous link:
http://css.maxdesign.com.au/listamatic/index.htm

 ol, ul, li { margin: 0; padding: 0; }
 ol { padding-left: 2.5em; }    /* Allows up to 3 digits. */
 ul { padding-left: 1.4em; }    /* Minimum needed across browsers. */
 li { ... }

 Adjust the additional margins and padding as desired.
 The first line removes the browser default settings for lists. The
following lines add it back in to your specification.

 There is a problem with using {list-style-image: <uri>; }. IE6 has a
different idea of spacing around the image than other browsers. It cannot
be controlled with CSS.