lists

pecan wrote:

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

Thanks, it's not missing much! Although I've been using background
images on lists, I never thought of using one for a bullet! Throw in
text-indent and maybe some padding (after you zero out everything else)
and you have total control.

Jeff

Jeff

On 12/01/08 01:04 pm, 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.

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.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

On 2008-12-02, Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:
[...]

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.

That's OK but the text wraps underneath the bullets, so you might as
well just use list-style-position: inside.

In article <gh3ikd$dm3$1 (AT) news (DOT) motzarella.org>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

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.

Would you do this for an ordered list too? Why? Perhaps you have made
experiments and found that the appearance criterion is better served
your way than the table way. I would be very interested to see such
experiments. If a table is just as effective on the appearance question
as an OL then the table is the better because, unlike a semantically
neutral DIV, it at least is semantically suitable, an ordered list being
semantically equivalent to a table - at the very least, closer than a
DIV.

The business with unordered lists is a trickier matter. There is no
difficulty at all in representing an unordered list in a table. It is
not even wrong semantically. But putting bullets in a column does appear
to me to be crossing a line, it should make us a little uncomfortable!
That is pushing the tabular model too far perhaps?

However, to take up your idea of an image, a left floated bullet in a
one col table, each cell containing a list item (not a LI), should be
fine, it would even be semantically unobjectional as far as I can see.

--
dorayme

Ben C wrote:

On 2008-12-02, Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:
[...]
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.

That's OK but the text wraps underneath the bullets, so you might as
well just use list-style-position: inside.

Doesn't wrap with left margin applied.

--
Gus

dorayme wrote:

In article <gh3ikd$dm3$1 (AT) news (DOT) motzarella.org>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

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.

Would you do this for an ordered list too? Why? Perhaps you have made
experiments and found that the appearance criterion is better served
your way than the table way. I would be very interested to see such
experiments. If a table is just as effective on the appearance question
as an OL then the table is the better because, unlike a semantically
neutral DIV, it at least is semantically suitable, an ordered list being
semantically equivalent to a table - at the very least, closer than a
DIV.

The business with unordered lists is a trickier matter. There is no
difficulty at all in representing an unordered list in a table. It is
not even wrong semantically. But putting bullets in a column does appear
to me to be crossing a line, it should make us a little uncomfortable!
That is pushing the tabular model too far perhaps?

However, to take up your idea of an image, a left floated bullet in a
one col table, each cell containing a list item (not a LI), should be
fine, it would even be semantically unobjectional as far as I can see.

Just as a matter of preference for me. I haven't thought much about the
pros and cons. It's easier for me to work with - much better control. I
presented it as an alternative method.

--
Gus

In article <gh4gnt$pt1$1 (AT) news (DOT) motzarella.org>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

dorayme wrote:
In article <gh3ikd$dm3$1 (AT) news (DOT) motzarella.org>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

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.

Would you do this for an ordered list too? Why? Perhaps you have made
experiments and found that the appearance criterion is better served
your way than the table way. I would be very interested to see such
experiments. If a table is just as effective on the appearance question
as an OL then the table is the better because, unlike a semantically
neutral DIV, it at least is semantically suitable, an ordered list being
semantically equivalent to a table - at the very least, closer than a
DIV.

The business with unordered lists is a trickier matter. There is no
difficulty at all in representing an unordered list in a table. It is
not even wrong semantically. But putting bullets in a column does appear
to me to be crossing a line, it should make us a little uncomfortable!
That is pushing the tabular model too far perhaps?

However, to take up your idea of an image, a left floated bullet in a
one col table, each cell containing a list item (not a LI), should be
fine, it would even be semantically unobjectional as far as I can see.

Just as a matter of preference for me. I haven't thought much about the
pros and cons. It's easier for me to work with - much better control. I
presented it as an alternative method.

OK, I was just curious.

I have the different impression that simple tables are easier to control
with their great shrink to fit technology and beautiful inbuilt
presentational automatic vertical and horizontal content alignments. It
is no wonder they were such a temptation for all manner of fancy
layouts! <g>

--
dorayme

On 2008-12-02, Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

Ben C wrote:
On 2008-12-02, Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:
[...]
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.

That's OK but the text wraps underneath the bullets, so you might as
well just use list-style-position: inside.


Doesn't wrap with left margin applied.

Sorry, missed that part!