vertical alignment on ul/li bullet image

[Gabriella]

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.

[Rik]

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

[Andrew]

On 2 Aug 2006 00:40:47 -0700, "Gabriella" <fr********@yahoo.com>
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/

[Gabriella]

Thanks, it solved the problem, but created a new one...
Now, when trying to add dynamically an entry to the list, using the
following code:

var myList = document.getElementById("my-list");
var newLiElement = document.createElement('li');
newLiElement.id = "new-entry";
myList.appendChild(newLiElement);

var innerHTML = "&nbsp;<a href="...">[remove from
list]</a>"
document.getElementById("new-entry").innerHTML = innerHTML;

A new entry (new li element) is created but WITHOUT the bullet image
(the arrow.gif).
Before, it did add the bullet image.
Why did it disappear?

Thanks again, Gabi

[Andrew]

On 2 Aug 2006 14:20:30 -0700, "Gabriella" <fr********@yahoo.com>
wrote:

>Thanks, it solved the problem, but created a new one...
Now, when trying to add dynamically an entry to the list, using the
following code:

var myList = document.getElementById("my-list");
var newLiElement = document.createElement('li');
newLiElement.id = "new-entry";
myList.appendChild(newLiElement);

var innerHTML = "&nbsp;<a href="...">[remove from
list]</a>"
document.getElementById("new-entry").innerHTML = innerHTML;

A new entry (new li element) is created but WITHOUT the bullet image
(the arrow.gif).
Before, it did add the bullet image.
Why did it disappear?

Thanks again, Gabi

Hi Gabi,

So quickly I get out of my depth! Sigh........... You will need
someone cleverer than me for this one.

Sorry,

Andrew
--

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