Problem Aligning Custom Image and Text on a List

[jnjc]

Hi Folks,

This problem is driving me nuts. I am trying to use a custom image for the bullet on a list. My css is as follows:

.bullet1
{
    list-style-image: url(bullet1.gif);
    list-style-position: inside;
    font-size: 18px;
}

My HTML is:

    <ul class="bullet1">

		<li>This is bullet 1</li>
		<li>This is bullet 2</li>
		<li> This is bullet 3</li>
	</ul>

But I can't get the list text and the image to line up. You can see the problem at this URL:
http://www.solasit.com.au/sandbox/lists/

Anyone got any ideas ?

TIA,
JC

 

[Geodun1]

Try adding a vertical align attribute to your text and set it to center. That might help line things up.

 

[jnjc]

Thanks Geodun1,

I had tried vertical-align:center, but your post made me have another look. It should be vertical-align:middle. When I do this and tweak the line height it works in IE, but it still looks wrong in FF. It's getting closer though....

I have updated the link:
http://www.solasit.com.au/sandbox/lists/

Any ideas how to sort it in FF ?

Thanks again,
JC

 

[Geodun1]

Firefox starts the text from the bottom of the image for some reason, so try doing the following code. It's a bit of a shot in the dark though. Basically I'm banking that FF will handle the center command better than the middle command.

    <ul class="bullet1">

		<li><span id="center">This is bullet 1</span></li>
		<li><span id="center">This is bullet 2</span></li>
		<li> <span id="center">This is bullet 3</span></li>
	</ul>

.bullet1
{
    list-style-image: url(bullet1.gif);
    list-style-position: inside;
    font-size: 18px;
    vertical-align: middle;
}

#center {
    vertical-align: center;
}

 

[jnjc]

Nope, still not lined up properly in FF. You wouldn't image this would be that difficult. I have updated the link with your suggestion, under the heading Example 2.

Anybody got any other ideas ?

Thanks,
JC

 

[AprilMaybe]

Okay jnjc so I was bored and did a little researching and experimented with an old webpage of mine. Here is what I used to get the bullet image to line up with the text when viewing in IE and FF. I had to adjust based on the already existing settings on the page but it seemed to do the trick after finding a couple of things online.

What worked for me:
------------------------

ul { font-size: 0.70em; font-family: Verdana; text-align: left; margin-left: 15px; line-height: 25px; }
ul li { list-style-type: none; background: url(bullet1.gif) no-repeat 2px 1px; }
li {padding-left: 30px; }


------------------------

<ul>
<li>This is bullet 1
<li>This is bullet 2
<li>This is bullet 3
</ul>

Maybe that will help or maybe not but it's at least another option you can try in case you haven't found a solution already.

 

[jnjc]

Thanks AprilMaybe that way of doing it is spot on.

I have put a link here:

http://www.solasit.com.au/sandbox/lists/index2.htm

I probably will need to play around with image sizes and font size etc. to get it 100% but your idea of using the background image instead of a bullet image is perfect.

Much Appreciated,
JC

 

[AprilMaybe]

Awesomeness! I can't take the credit for the idea though...I just did some google searching and played with it after that. Looks great though Glad I could be of some help. Yay lol