homepage Welcome to WebmasterWorld Guest from 23.23.9.5
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Small list item picture issue
statiiic

5+ Year Member



 
Msg#: 3502331 posted 9:56 pm on Nov 11, 2007 (gmt 0)

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

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



 
Msg#: 3502331 posted 10:37 pm on Nov 11, 2007 (gmt 0)

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

5+ Year Member



 
Msg#: 3502331 posted 10:45 pm on Nov 11, 2007 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3502331 posted 11:37 am on Nov 12, 2007 (gmt 0)

get an effect that's acceptable cross-browser

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

Dabrowski

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3502331 posted 11:37 am on Nov 12, 2007 (gmt 0)

get an effect that's acceptable cross-browser

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

jetboy

5+ Year Member



 
Msg#: 3502331 posted 5:10 pm on Nov 12, 2007 (gmt 0)

#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

5+ Year Member



 
Msg#: 3502331 posted 5:23 pm on Nov 12, 2007 (gmt 0)

Thx

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

thx

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved