Re: vertical alignment on ul/li bullet image

Gabriella 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?

I'm not sure wether this it's possible to set the position in the different
browsers. I haven't found a method for this.

Possible workaround (untested):
ul {
margin: 0px;
padding: 0px;
}
li{
list-style-type: none;
margin: 0.3em 0 0 0;
padding-left: 10px; /* or whatever you need for you image */
background-image: url(/Images/arrow.gif);
background-position: left top; /* or replace 'top' with the appropriate
em value */
background-repeat: no-repeat;
}

Grtz,
--
Rik Wasmus


.

Relevant Pages

  • Re: Formatting bullets in Word 2007
    ... the company information on the left margin. ... Any thoughts on how I can either "fix" the template on my original document ... I have tried variations of the Bullet Position, Tab Indent, etc, ...
    (microsoft.public.word.docmanagement)
  • Re: Insert text/symbols in the left margin
    ... Yeah on any other line where there is not a bullet that would be the case. ... I can then move the left margin to slide it over, ... "Suzanne S. Barnhill" wrote: ... Word MVP FAQ site: http://word.mvps.org ...
    (microsoft.public.word.pagelayout)
  • 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: 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)
Loading