473,322 Members | 1,408 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

vertical alignment on ul/li bullet image

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.

Aug 2 '06 #1
4 41753
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
Aug 2 '06 #2
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/
Aug 2 '06 #3
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

Aug 2 '06 #4
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/
Aug 3 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Nikolaos Giannopoulos | last post by:
I have a paragraph and simply want a bullet image to appear at the start of the paragraph text. I tried the following html: <p><span class="dot"></span>some text</p> as seen here:...
8
by: abracad | last post by:
Hi Is it possible to vertically align an image in the middle of a DIV of fixed height?
3
by: Frank Wheeler | last post by:
Why am I unable to attain proper vertical alignment between a DIV and a TABLE here: http://www.whbvillage.com/agenda-archives/agendex.html The DIV is coded: <DIV style="float: left;...
3
by: cbjewelz | last post by:
hey I've been suffering from several float problems. I want a Title on the left to be aligned vertically with several links on the right. However with my code the Title is lower than the links....
2
by: Nik | last post by:
I have a simplified version of my image gallery at: http://www.niksally.f2s.com/upload/gallery/mixed_gallery.html Essentially, the format of the html is an in-line list: <ul> <li><img></li>...
11
by: C.W.Holeman II | last post by:
I what to hide an input element and the following text. I have the selector for the input working and just need to grab the text following it. CSS: form{ display:table; text-align:center; }
8
by: ayamopamo | last post by:
Hi- I am trying to center a web page. It seems like this should be very simple to do, but apparently it isn't my day. I have successfully centered the background by calling it in the css body tag:...
3
by: vunet | last post by:
When I use image as a bullet within LI element I have different image positioning results in Firefox and IE6. IE6 puts the image on top and far from left LI's border. Firefox puts it nicely in the...
0
by: balistersharma | last post by:
How can set vertical alignment with RadioButtonList .so that the RadioButtonList and text show in the same alignment. I have used following syntax but this is not work as my requirement. ...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.