css for lists

[esthera]

what css do I need to put in my list so that the bullet shows aligned to the top of the text ?

[coothead]

Hi esthera,

I believe that the only way to accomplish this is with list-style-image.
Try this example with the attached gif.
<style type="text/css">
<!--
ul {
font-size:20px;
}
#foo {
list-style-image:url(bullet.gif);
}
-->
</style>

<ul>
<li>This is a normal list bullet</li>
<li id="foo">This is a custom list bullet</li>
</ul>
coothead

[esthera]

but how can i align the bullet to the top of the text.

[coothead]

if you tried my example you would see that the bullet is aligned to the top of the text. :)

[ronaldb66]

Please elaborate on "the top of the text"; sketch, example?

[esthera]

i'm trying this somewhere else and it's stubbornly still showing the dot instead of my bullet.

css



#foo {
list-style-image:url(tbullet.jpg);
}


html

<ul>
<li id="foo">list 1</li>
<li id="foo">list 2</li>
</ul>

any ideas why this could be?

[bushie]

Bit hard to answer your question without seeing your code in full.

I see my old mate Coot is on the job, so you'll get some good input there.

Looking at your last post though, you have the id used on each <li>, You can't do this as it is only possible to use an id once on a page. You need to wrap the entire <div> in an id and then let the <li> inherit the values you set for the div itself. It's a much cleaner and easier way of doing it. Your list-style-type is normally set on your <ul> also as it provides the opening and closing tags for your <li>s.

[mrruben5]

You can't vertically align a bullet in a list. You can however, set a background-image, remove the list bullet, and set the background-image to no repeat.
ul, li {
list-style-type: none;
margin: 0;
padding: 0
}

li {
padding-left: 20px;
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: top left
}
I hope that helped :)

[esthera]

thanks..
it's working if i put the css directly in the html title tag but not if i put it in my external css

[bushie]

thanks..
it's working if i put the css directly in the html title tag but not if i put it in my external cssI presume you mean the head of your document.

If the code isn't working in your external css, check the url path to the image you're trying to use. Perhaps it needs to be

url(../images/bullet.gif)