li styling

[Coditor]

Hi,

Why won't a <li> image not show when I have set the <ul> to be display: inline ?

And, is it possible to use a text character (eg "|") instead of an image?

Coditor

[Oleg Butuzov]

li {list-style:none;}
li:before {content:"|"}

or
li {list-style:none; padding-left:20px; background: url(vline.gif) no-repeat;}

[Coditor]

I've tried to use the {content: "|"} in other occations but I'm afraid that IE doesn't support it (and IE is still used by 90-95% of the visitors).

I like the idea of using background-image and padding... Thanks!

Coditor

[ruturajv]

you can add something like this

Code: Select all

li {
    display: block;
    padding: 5px;
    float: left;
}

[Coditor]

Well, the problem was that I need to use display:inline ...


It's for building a menu with this HTML:

Code: Select all

<ul>
<li><a href="/">home</a></li>
<li><a href="mailto:me@mymail.com">mail</a></li>
<li><a href="/search.php">search</a><li>
</ul>


That displays as:

home | mail | search

[Oleg Butuzov]

you could made last menu with class last

so

Code: Select all

 <ul>
<li><a href="/">home</a></li>
<li><a href="mailto:me@mymail.com">mail</a></li>
<li><a href="/search.php">search</a><li>
</ul>


Code: Select all

 li {
    border-right:1px solid #efefef;
# }
li.last {
border:0;
}


also you can look here
http://www.artlebedev.ru/tools/technogr ... ated_list/

[Coditor]

Yes, that's exactly how I ended up fixing the problem. With a bit of padding...