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
ch******@cyberdees.net
