Re: vertical alignment on ul/li bullet image

On 2 Aug 2006 00:40:47 -0700, "Gabriella" <frohlinger@xxxxxxxxx>
wrote:

hi,
I am writing a simple bulleted list with ul/li, with my image as the
list-style-image, and for some reason the image bullet on IE only (FF
is fine) is vertically aligned to the top.
Meaning, the bullet image is aligned to the TOP of the text following
it.
In FF the image is aligned to the center of the text following it, as
it should.
What am I doing wrong?
ul {
list-style-image: url(/Images/arrow.gif);
list-style-position: inside;
margin: 0px;
padding: 0px;
}

li {
margin: 0;
margin-top: 0.3em;
padding: 0px;
}

I tried to add vertical-align: bottom, but nothing helped.
Any ideas?

Thanks, Gabi.

Hi Gabi,

I wrestled with the same problem and my solution (modified for your
example) was:

ul {
list-style-type: none;
padding: 0em;
margin: 0em;
}

ul li {
background-image: url(Images/arrow.gif);
background-repeat: no-repeat;
background-position: 0em .4em;
padding-left: 1em;
}

Note that the image is set to the li not the ul.

Hope this is a guide for you!!

Andrew.

--

Andrew
http://www.andrews-corner.org/
.

Relevant Pages

  • Re: CSS: tweaking bullet lists
    ... I've fooled around with padding and margins but the bullet always seems to move as well, where what I want is to put some space between the bullet and the following text. ... IIRC IE and Opera draws the bullet to the edge of the margin, whereas Mozilla browsers draw it to the padding - the spec makes no recommendation on this. ... Best consistency is to set margin: 0; ...
    (uk.net.web.authoring)
  • Re: Add new li dynamically adds indentation in IE
    ... but my CSS already contains margin and padding 0. ... That's the reason that my static HTML/CSS list looks OK, ...
    (comp.lang.javascript)
  • Re: vertical alignment on ul/li bullet image
    ... and for some reason the image bullet on IE only (FF ... the bullet image is aligned to the TOP of the text following ... margin: 0px; ... padding: 0px; ...
    (comp.infosystems.www.authoring.stylesheets)
  • vertical alignment on ul/li bullet image
    ... and for some reason the image bullet on IE only (FF ... the bullet image is aligned to the TOP of the text following ... margin: 0px; ... padding: 0px; ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: integers and arrays in Java - how?
    ... padding: 0px 0px} ... margin: 10px 10px; ... form fieldset legend { ... padding: auto auto; ...
    (comp.lang.javascript)
Loading