Bullets - UL, LI

[InNeedofHelp]

I have a question about the bullet code:

<ul>
<li>Apples
<li>Oranges
<li>Bananas
</ul>


Take that bunch of code for example. The <li> tags produce a bullet, just a normal dot. But i was wondering if you could modify that so that the <li> tag produces an arrow like this:
>Apples
>Oranges
>Bananas

But don't want to have to do an alt + num before each link to make my bullets. Any way to modify the <li> or the <ul> tag to do that?

This may be CSS, which I have a pretty good knowledge of, but i'm not sure.

Thanks in advance.

[jscheuer1]

<style type="text/css">
li {
list-style-type:none;
}
</style>

<ul>
<li>> Apples
<li>> Oranges
<li>> Bananas
</ul>

Notes: You can also use the ul selector in the style section with the same result or a class or id could be employed in the usual manners. The list-style-image property could be used as well however, it sometimes renders oddly, suffering from the same peculiarities as rollover images, and then some. Perhaps with preloading these could be overcome.

[Twey]

Never use > or < in HTML without escaping them. You want to use &lt; for < or &gt; for >. You also ought to close those LI tags.
<style type="text/css">
li {
list-style-type: none;
}
</style>

<ul>
<li>&gt; Apples</li>
<li>&gt; Oranges</li>
<li>&gt; Bananas</li>
</ul>

[InNeedofHelp]

Allright, but the reason I asked was because I didn't want to have to write out &lt before each bullet text. So can i do this?

<style type="text/css">
li {
list-style-type:&lt;
}
</style>


Would that put the &lt (>) every time i wrote <li> in my html document?

[jscheuer1]

I don't see the harm in >, there may be some, I don't know. Probably just that it won't validate, if that. Anyways, the right pointing carrot is not available via css as a bullet symbol. There is some advanced css, not supported by IE6 that will allow 'insertion before', that would work, but, as I say, it doesn't in IE6. That leaves writing whatever character in whatever manner you choose for each li or using the the list-style-image property. For that, you make a small .gif of your preferred symbol, then use:


li {
list-style-image:url('my_list_bullet.gif');
}

In your stylesheet. As I said, this sometimes looks odd but, as long as you are not changing it dynamically, should be fine.

[InNeedofHelp]

Ok. Thanks :) .