homepage Welcome to WebmasterWorld Guest from 54.226.230.76
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, Moderator: open

CSS Forum

    
Small list item picture issue
statiiic




msg:3502333
 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




msg:3502354
 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




msg:3502364
 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




msg:3502652
 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




msg:3502653
 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




msg:3502886
 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




msg:3502895
 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