Welcome to WebmasterWorld Guest from 54.147.220.66

Forum Moderators: not2easy

Message Too Old, No Replies

Small list item picture issue

   
9:56 pm on Nov 11, 2007 (gmt 0)

5+ Year Member



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]

10:37 pm on Nov 11, 2007 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.
10:45 pm on Nov 11, 2007 (gmt 0)

5+ Year Member



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

11:37 am on Nov 12, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



get an effect that's acceptable cross-browser

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

11:37 am on Nov 12, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



get an effect that's acceptable cross-browser

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

5:10 pm on Nov 12, 2007 (gmt 0)

10+ Year Member



#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.

5:23 pm on Nov 12, 2007 (gmt 0)

5+ Year Member



Thx

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

thx