Webmaster Forum / HTML, CSS, Scripts / CSS / November 2003

I am presently trying to display a list of items INLINE using an image as a
seperator..... and having difficulties....

See below for 3 seperate sets of html and css files. Each set does something
different. Ideally I would like the result of Menu 1 but instead of having
the pipe effect border on the right of each choice I would like to replace
that with an image of some sort.

Any help much appreciated.

------

Menu 1 (this has a pipe effect seperator that is controlled by a border
property) - This is how I would like to have it display but with an image as
a seperator

[html]
<ul class="menu1">
<li class="first">Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>

[css]
ul.menu1 {
margin-left: 0px;
display: inline;
}

ul.menu1 li {
padding-right:3px;
padding-left:5px;
border-left: 1px solid #666666;
display: inline;
}

ul.menu1 li.first{
border-left: none;
display: inline;
}

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

Menu 2 (this displays the list with images but they are not INLINE)

[html]
<ul class="menu2">
<li class="first">Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>

[css]
ul.menu2 {
margin-left: 0px;
}

ul.menu2 li {
padding-right:3px;
padding-left:5px;
list-style-type: none;
list-style-image: url(bullet.gif);
list-style-position: inside;

}

ul.menu2 li.first {
list-style-image: none;
 }

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

Menu 3 (this displays the list INLINE but does not display the image)

[html]
<ul class="menu3">
<li class="first">Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>

[css]
ul.menu3 {
margin-left: 0px;
}

ul.menu3 li {
padding-right:3px;
padding-left:5px;
list-style-type: none;
list-style-image: url(bullet.gif);
list-style-position: inside;
display: inline;
}

ul.menu3 li.first {
list-style-image: none;
 }

ul.menu2 li.first {
list-style-image: none;
 }

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

Desigan Chinniah
chinniah@cyberdees.net