Log in

View Full Version : horizontal list image?


brentnicholas
01-25-2007, 11:42 PM
Hi, all. I'm just learning CSS and doing ok with it but am very stumped on this.

I can't seem to get my list to show a 'list-style-image' when I have the list in a horizontal configuration. I can place a background image, but that introduces it's own formatting issues. I know the link to the image is correct.

Thoughts? Thanks for your time. -BN

Code:
----------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
#folderowners{
font-size: xx-small;
font-weight: bold;
text-align: left;
background: #b4b4b4;
border: 1px solid #000000;
clear: both;
margin: 0 0 5px 0;
padding: 1px 0 5px 2px;
}

#folderowners ul li {
display: inline;
}

#folderowners ul li a{
padding: .2em 1em;
}

#folderowners ul{
clear: both;
text-align: left;
margin: 0;
padding: 0;
}

#folderowners li{
list-style: none;
list-style-image: url(../../images/mail_write_16.gif);
}
</style>
</head>

<body>

<div id="folderowners">
Folder Owner(s):
<ul>

<li><a href="mailto:xxx@xxx.xxx">O'Brian, Mary</a></li>

<li><a href="mailto:xxx@xxx.xxx">Welch, Bob</a></li>

<li><a href="mailto:xxx@xxx.xxx">Nicholas, Brent</a></li>

</ul>
</div>

</body>
</html>
----------------------------------------------------
jscheuer1
01-27-2007, 06:40 AM
This can be done in Opera and FF but not in IE (at least not that I could figure out). The styling of lists is one of the less consistent forms of style across browsers. Opera and FF will display it if done a certain way but, will differ between each other as far as spacing goes. If you have a method for doing it without the list-style-image, I'd go for it. I'd even consider dumping the list altogether.
brentnicholas
01-29-2007, 04:51 PM
OK, thatnk's for the info. I think I might try for a <DL> and see how that works out. I was using the list element since I'm aiming to be as symanticly correct as possible.. but since those browser agents can't play nice... :))
Twey
01-29-2007, 05:06 PM
You could try
list-style-position: inside;Nothing definite on this, but it sounds as if it ought to work.
jscheuer1
01-29-2007, 05:32 PM
You could try
list-style-position: inside;Nothing definite on this, but it sounds as if it ought to work.

It does make things more consistent in FF and Opera, at least with a strict DOCTYPE but, the image still doesn't show in IE 7.

What I didn't mention is that in order to have a list-style, an element must have display:list-item;, This is the default for li's but, changing it to inline breaks this of course. An inline sort of look can be got by floating the li's but, this introduces the need to clear the float, not a real problem. However, in the end, IE still will not show the image unless the list is vertical.
Twey
01-29-2007, 05:54 PM
Aah, yes, of course. I forgot about display: list-item;. Floating the list will be equally problematic in this case, since the specification states that any floated item should be treated as block-level. IE is probably doing the right thing here.