Small list item picture issue

[statiiic]

HI,

I'm using my cms system which auto generates menu items. It displays the menu title in an list

<ul><li>Menu item</li><li>Menu item2</li></ul>
However now I want to use an small picture in front of the menu.
I can do that with using this:
list-style-image:url(../img/list_item.jpg);

however the text doesnt get displayed in the middle of the <li> So it messes up the design. Has anyone an better solution for this?

Also the float:left seems not to work properly? Really strange hehe

My css:
#menu ul {
list-style-type:none;
margin:9px 0 0 30px;
padding:0;
text-transform:uppercase;
font-weight:bold;
font-size:12px;
height:21px;
}

#menu ul li {
margin-right:20px;
float:left;
list-style-image:url(../img/list_item.jpg);
}

[edited by: tedster at 10:30 pm (utc) on Nov. 11, 2007]

[tedster]

Different browsers seem to have different issues with list-style-image. I've found that I often need to add or remove a few pixels from the top and/or bottom in an image editor to get an effect that's acceptable cross-browser.

[statiiic]

No what I ment is that the picture I use has an certain height. The text which is next to it aligns to the bottom of the picture. So the middle of the text is not at the same height as the middle of the >

Is their an way to solve this

[Dabrowski]

get an effect that's acceptable cross-browser

You could use conditional comments to 'call in' different images depending on the browser.

[Dabrowski]

get an effect that's acceptable cross-browser

You could use conditional comments to 'call in' different images depending on the browser.

[jetboy]

#menu {
padding: 9px 0 0 30px;
}
#menu ul {
width: 100%;
padding: 0;
margin: 0;
}
#menu li {
padding-left: 20px;
margin: 0 20px 0 0;
list-style: none;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
background: url(/img/list_item.jpg) 0 0.4em no-repeat;
}
#menu a {
line-height: 21px;
}
br.clear {
height: 0;
clear: both;
}
<div id="menu">
<ul>
<li><a href="#">Link</a></li>
</ul>
<br class="clear" />
</div>

. Applying a width to the <ul> will stop older Operas collapsing floated lists. Moved margins up #menu, to avoid box model problems in IE, but don't dimension it too!

. Vertically positioning the bullet in 'em's will keep it roughly in place when text changes size, or use 50% instead.

. Overall height is controlled by the <a>. Depending on your line-height, you may need to drop the line height by 1px and add a bottom padding of 1px to get things pixel perfect in IE.

. If you have problems with disappearing bullets in IE - which shouldn't be a problem in this particular case - add zoom: 1.0; to your <li>s within a conditional comment.

. Exchange <br class="clear" /> for your favourite float clearing method.

[statiiic]

Thx

Instead of the list item. I used background: URL()
Now it works properly

thx