list-style-image margin problem

[Haines Brown]

I find that when I use list-style-image with galeon or mozilla,
padding is inserted between the symbol image and the following list
text, while under IE 5.0 it seems to be inserted before the image
instead of after it.

li.up {
list-style-image: url(../bin/arrow.png);
height: 1.4em;
margin-left: -0.4em;
}

<ul>
<li class="up">list text</a>
</li>
</ul>

By fiddling, I find that when I use a LI container that is not
nested within a UL container, the padding is not inserted, so it
appears that the padding is associated with the UL element.

I'm looking for a work-around so that the padding that appears at
least to the right of the symbol image is the same in both
environments. I assume that adding some right margin to the symbol
graphic will just increase the margin in mozilla.

Ideally, I'd like to have the margin to the left of the symbol image
remain the same as well, but this is less critical. The margin-left
value above serves to move the list item symbol to nearly the left
edge of the body, and the padding problem described above makes this
left shift a bit inconsistent. If I try to move the list to the left
by adding negative margin to the UL element, the discrepancy becomes
great.

--
Haines Brown

[Brian]

Haines Brown wrote:

when I use list-style-image with galeon or mozilla, padding is
inserted between the symbol image and the following list text
No. There is a left-padding on the <UL> element, into which goes the
list marker.
while under IE 5.0 it seems to be inserted before the image instead
of after it.
The <UL> element gets a left-margin. Same for Opera.

http://devedge.netscape.com/viewsour...2/list-indent/
By fiddling, I find that when I use a LI container that is not nested
within a UL container, the padding is not inserted
Well, since that's invalid markup, it's hard to say what's going on.
(Error correction is an arcane science, it seems.)
it appears that the padding is associated with the UL element.
The padding or the margin is associated with the <UL> element.
I'm looking for a work-around so that the padding that appears at
least to the right of the symbol image is the same in both
environments.

Explicitly set both margin-left and padding-left on <UL>.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[Haines Brown]

> I find that when I use list-style-image with galeon or mozilla,

padding is inserted between the symbol image and the following list
text, while under IE 5.0 it seems to be inserted before the image
instead of after it.

li.up {
list-style-image: url(../bin/arrow.png);
height: 1.4em;
margin-left: -0.4em;
}
Brian <us*****@julietremblay.com.invalid> writes:
No. There is a left-padding on the <UL> element, into which goes the
list marker.
Yipes. You are quite right. My memory failed me. However, when I make
the correction, the old problem persists and there an additional
bigger problem.
The <UL> element gets a left-margin. Same for Opera.
This does not seem to be true when using list-style-image under
galeon/mozilla. Here's my revised markup:

ul.parents {
list-style-image: url(../bin/arrow.png);
margin-left: -0.3em;
}

<ul class="parents">
<li>text</li>
</ul>

To explain the situation, I'll compare a normal UL with its default
bullet and the list-style-image list with a custom symbol image.

Under galeon, the bullet aligns with the _right_ edge of the symbol
image, and as a result the left edge of the graphic almost reaches
the left border of the body. Under IE 5.0, the bullet aligns with the
_left_ edge of the symbol. That is, in the two browsers, the symbol is
horizontally displaced by the width of the symbol.

However, the line texts roughly align because the padding seen between
the bullet and text with tbe normal UL is not seen between the sylbol
and text with the list-style-image list. That is, with the corrected
markup above, there is no padding between symbol and text.
Well, since that's invalid markup, it's hard to say what's going on.
(Error correction is an arcane science, it seems.)
Yes, but, oddly, my bad markup validated OK with W3C.
Explicitly set both margin-left and padding-left on <UL>.

A little hard to do if my description above is accurate. In the above
markup, I use a bit of margin-left to set the symbol image exactly at
the body margin, but then it falls outside the body in EI 5.0 by the
width of the symbol.

I was better off with my original incorrect markup.

--
Haines Brown

[Johannes Koch]

Haines Brown wrote:

[li outside ul]

Well, since that's invalid markup, it's hard to say what's going on.
(Error correction is an arcane science, it seems.)

Yes, but, oddly, my bad markup validated OK with W3C.

li is only valid as a child of ul or ol. I'm pretty sure, the validator
will give you an error when you use li without ul or ol parent.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

[Haines Brown]

Johannes Koch <ko**@w3development.de> writes:

Haines Brown wrote:

[li outside ul] li is only valid as a child of ul or ol. I'm pretty sure, the
validator will give you an error when you use li without ul or ol
parent.

Sorry I wasn't clearer about this. The LI was not outside a UL
container. Here's the markup I'm talking about (I've expanded the
information I offered before because there's several issues here):

ul.parents {
margin-top: 1em;
margin-bottom: -0.3em;
}
li.up {
list-style-image: url(../bin/arrow.png);
height: 1.4em;
}
.link-up {
font-weight: bold;
position: relative;
top: -0.4em;
}

<ul class="parents">
<li class="up"><a href="index-a.html">
<span class="link-up">Description of a parent</span></a>
</li>
</ul>

First to mention is that the vertical spacing defined for the .link-up
class is intended to adjust the vertical position of the symbol image
relative to the following line of text (I don't want the image to
rest exactly on the base line of text). However, I don't get
consistent vertical positioning between Mozilla and IE 5.0. What could
be the source of this inconsistency? Do I need to define line height
as 1 em in li.up in order to equalize inheritance (not in a position
to check this at this moment)?

Second, while the LI is contained within the UL block, what I've done
is to associate the list-style-image with the LI, not the UL. This is
not the way my books says it is supposed to be, but I find that a) it
passes W3C validation, and b) it gets around the problem that with
list-style-image, IE 5.0 places the right margin of the image in the
position otherwise taken by the normal UL bullet, while Mozilla places
the left margin of the symbol image in the position otherwise taken by
the normal UL bullet. This means that when comparing Mozilla and EI
5.0, there is a horizontal shift in the position of the LI that is
equal to the width of the symbol image. My question is, if my
adventurous syntax is a bad choice, how do I correct the inconsistent
horizonital positioning that results when the list-style-image is
properly associated with the UL element?

Third, it seems that Mozilla inserts a small padding to the right of
the symbol image to separate it from the following text, which IE 5.0
does not. I'm not sure how to overcome the resulting inconsistency
between the two browsers. While the answer might be to define the
padding between the symbol and text to override the default, so far
I've not figured out how to do it.

--
Haines Brown

[Torsten Kleinert]

Haines Brown wrote:

["list-style-image" vs. margin]

Gaah! I hate that one. Every browser worked fine, i.e. displayed
appropriate padding, except IE. What about this solution:

<ul style="list-style-image:url(./my_fancy_bullet.png);">
<li style="padding-left:5pt;">
Text Text Text Text Text Text
</li>
</ul>

HTH
Torsten

[Haines Brown]

to**************@web.de (Torsten Kleinert) writes:

Haines Brown wrote:

["list-style-image" vs. margin]

Gaah! I hate that one. Every browser worked fine, i.e. displayed
appropriate padding, except IE. What about this solution:

<ul style="list-style-image:url(./my_fancy_bullet.png);">
<li style="padding-left:5pt;">
Text Text Text Text Text Text
</li>
</ul>

HTH
Torsten

The context is complicated enough so that I'm not sure what markup is
causing you to gag ;-)

But your suggestion does not work for me. That is, using the markup
you provide here, under IE, when compared with Mozella, the image
(fancy-bullet) gets shifted further right by the width of the
image. It was this problem that prompted me to arrive at an ugly
solution in the first place.

Just to be sure we are talking about the same thing, here's what fixed
my problem (simplified a bit by leaving out vertical space
adjustments):

ul.children {
list-style-type: none;
padding-left: 0px;
margin-left: 35px;
}
li.down {
background-image: url(../bin/arrow-f.png);
background-repeat: no-repeat;
padding-left: 30px;
}

<ul class="children">
<li class="down">
Text Text Text
</li>
</ul>

The basic difference here is that I've first neutralized the left
padding inherited under EI, then defined a left margin for the list to
be shared by Mozilla and IE.

The other problem was inconsistant spacing between the image
and the text. Mozilla has a space by default, while it disappears
under IE. To take care of this, I had to get rid of the list image and
simulate it by using the image as backgroud.

Yes, sure is ugly, but after much fiddling, the only work-around I found.
It looks OK on my IE 5. Are you saying your experience with it is
otherwise?

--
Haines Brown