lists

I have to style some bulleted lists and I'm a little confused about
how to do this in a reasonably cross browser way. Client is a designer
with a print background hence I need to get this close to what he
expects (or get fired). Doctype is standards mode, HTML 4.01.

I'll need a similar appearance in recent Firefox, IE and Safari.

<div style="padding: 10px">
<h4>Some Heading</h4>
<ul>
<li>some nav item</li>

Now, I'm a little confused at how the padding works.

If I do this:

ul{
padding-left: 0px;
}

I lose the div padding also (list is slammed left, no bullets). Why is
that? The heading doesn't behave that way.

Is there a reference to what properties need to be changed in IE
versus the moz flavors? I can't seem to find this now and I have some
memory of alistapart having it. I remember it being a pain to do.

Is it possible to adjust the spacing between the bullet and the list
text?

Jeff

In article <As2dnWbkv4vN3qnUnZ2dnUVZ_rjinZ2d (AT) earthlink (DOT) com>, on Mon, 01
Dec 2008 15:04:29 -0500, Jeff wrote:

I have to style some bulleted lists and I'm a little confused about
how to do this in a reasonably cross browser way. Client is a designer
with a print background hence I need to get this close to what he
expects (or get fired). Doctype is standards mode, HTML 4.01.

I'll need a similar appearance in recent Firefox, IE and Safari.

div style="padding: 10px"
<h4>Some Heading</h4
<ul
<li>some nav item</li

Now, I'm a little confused at how the padding works.

If I do this:

ul{
padding-left: 0px;
}

I lose the div padding also (list is slammed left, no bullets). Why is
that? The heading doesn't behave that way.

Is there a reference to what properties need to be changed in IE
versus the moz flavors? I can't seem to find this now and I have some
memory of alistapart having it. I remember it being a pain to do.

Is it possible to adjust the spacing between the bullet and the list
text?

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

--
Rasal Postill
Dance your Life - Biodanza in Holland - <http://www.danceyourlife.eu>

Rasal Postill wrote:

In article <As2dnWbkv4vN3qnUnZ2dnUVZ_rjinZ2d (AT) earthlink (DOT) com>, on Mon, 01
Dec 2008 15:04:29 -0500, Jeff wrote:
| I have to style some bulleted lists and I'm a little confused about
| how to do this in a reasonably cross browser way. Client is a designer
| with a print background hence I need to get this close to what he
| expects (or get fired). Doctype is standards mode, HTML 4.01.

The standards do not say how the markers (bullets) should be positioned:
the standards leave this up to the individual browser, and different
browser makers have chosen to control the position in different ways.
Indeed, some browser makers have changed how they do it from version to
version: IE and Opera, for example, have each used 3 different methods.

Someone else has given you advice on this, but I would add that you have
to be very careful to test your solution on all browsers you expect
visitors to use, and you must be prepared to accept small differences
from browser to browser. If your client wants to fire you for not
making them *exactly* the same, refer them to section 12.5.1 of the CSS
2.1 specification, where it says (perhaps obscurely) "CSS 2.1 does not
specify the precise location of the marker box".

Jeff wrote:

div style="padding: 10px"
<h4>Some Heading</h4
<ul
<li>some nav item</li

Now, I'm a little confused at how the padding works.

If I do this:

ul{
padding-left: 0px;
}

I lose the div padding also (list is slammed left, no bullets).

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.

--
Berg

Jeff wrote:

I have to style some bulleted lists and I'm a little confused about how
to do this in a reasonably cross browser way ...

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.

Rasal Postill wrote:

In article <As2dnWbkv4vN3qnUnZ2dnUVZ_rjinZ2d (AT) earthlink (DOT) com>, on Mon, 01
Dec 2008 15:04:29 -0500, Jeff wrote:

| I have to style some bulleted lists and I'm a little confused about
| how to do this in a reasonably cross browser way. Client is a designer
| with a print background hence I need to get this close to what he
| expects (or get fired). Doctype is standards mode, HTML 4.01.
|
| I'll need a similar appearance in recent Firefox, IE and Safari.
|
| <div style="padding: 10px"
| <h4>Some Heading</h4
| <ul
| <li>some nav item</li
|
| Now, I'm a little confused at how the padding works.
|
| If I do this:
|
| ul{
| padding-left: 0px;
| }
|
| I lose the div padding also (list is slammed left, no bullets). Why is
| that? The heading doesn't behave that way.
|
| Is there a reference to what properties need to be changed in IE
| versus the moz flavors? I can't seem to find this now and I have some
| memory of alistapart having it. I remember it being a pain to do.
|
| Is it possible to adjust the spacing between the bullet and the list
| text?

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

Thanks, this looks familiar.

I notice this is 6 years old and I can't help but wonder what has
changed since then.

I do note that:

list-style-position: inside;

Seems to be supported in my test browsers, so that's good. I think the
last time I read this it wasn't and took it off my list of tricks. Kind
of like margin: auto is now widely supported and you no longer need to
use some hideous hack. It appears to me that the full CSS2 set is now
widely supported and CSS3 is iffy.

For those who have recommended reading the rules to my client, I'd
like to say that there is always someone else to replace me, but I don't
have so many clients that I wish to lose this one, *again*.

I think it's a nice thing to do things in a standard conforming
matter but there is always someone that could just do this with &bull;
and toss this all in a nested table layout. So, I'll leave the
evangelizing to others and write the best html I can.

Jeff

In article <As2dnWbkv4vN3qnUnZ2dnUVZ_rjinZ2d (AT) earthlink (DOT) com>,
Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

I have to style some bulleted lists and I'm a little confused about
how to do this in a reasonably cross browser way.

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

--
dorayme

On 2008-12-01, Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

I have to style some bulleted lists and I'm a little confused about
how to do this in a reasonably cross browser way. Client is a designer
with a print background hence I need to get this close to what he
expects (or get fired). Doctype is standards mode, HTML 4.01.

I'll need a similar appearance in recent Firefox, IE and Safari.

div style="padding: 10px"
<h4>Some Heading</h4
<ul
<li>some nav item</li

Now, I'm a little confused at how the padding works.

If I do this:

ul{
padding-left: 0px;
}

I lose the div padding also (list is slammed left, no bullets). Why is
that?

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.

The heading doesn't behave that way.

Is there a reference to what properties need to be changed in IE
versus the moz flavors? I can't seem to find this now and I have some
memory of alistapart having it. I remember it being a pain to do.

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

Is it possible to adjust the spacing between the bullet and the list
text?

No.

Jeff wrote:

I have to style some bulleted lists and I'm a little confused about how
to do this in a reasonably cross browser way. Client is a designer with
a print background hence I need to get this close to what he expects (or
get fired). Doctype is standards mode, HTML 4.01.

I'll need a similar appearance in recent Firefox, IE and Safari.

div style="padding: 10px"
h4>Some Heading</h4
ul
li>some nav item</li

Now, I'm a little confused at how the padding works.

If I do this:

ul{
padding-left: 0px;
}

I lose the div padding also (list is slammed left, no bullets). Why is
that? The heading doesn't behave that way.

Is there a reference to what properties need to be changed in IE
versus the moz flavors? I can't seem to find this now and I have some
memory of alistapart having it. I remember it being a pain to do.

Is it possible to adjust the spacing between the bullet and the list
text?

Jeff

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.

--
Gus

Jeff wrote:

I have to style some bulleted lists and I'm a little confused about how
to do this in a reasonably cross browser way. Client is a designer with
a print background hence I need to get this close to what he expects (or
get fired). Doctype is standards mode, HTML 4.01.

I'll need a similar appearance in recent Firefox, IE and Safari.

div style="padding: 10px"
h4>Some Heading</h4
ul
li>some nav item</li

Now, I'm a little confused at how the padding works.

If I do this:

ul{
padding-left: 0px;
}

I lose the div padding also (list is slammed left, no bullets). Why is
that? The heading doesn't behave that way.

Is there a reference to what properties need to be changed in IE
versus the moz flavors? I can't seem to find this now and I have some
memory of alistapart having it. I remember it being a pain to do.

Is it possible to adjust the spacing between the bullet and the list
text?

Jeff

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