Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
If you're setting a background image you can position it vertically using a 50%...
But if you have custom images on an unordered list, how can you make sure they appear in the middle of the text they are pointing to?
list-style-image doesn't seem to allow positioning in the same way a background image does? -
- CommentAuthorNick Presta
- CommentTimeMar 28th 2006
Opera 9 and IE6+ gets the image centered properly. So there's two answers:
1. Firefox gets it right as you can center it with line-height and other browsers get it wrong.
2. Firefox gets it wrong and it needs to be updated in the next version. -
Hmmmm!
-
IT's an issue, that's why most people use the background property instead of list-style-image.
I would recommend using the background property, since you have more control. -
Yep.. it's still a list, wether you are using list-image or not and so there's nothing wrong using the background property for list-items.
-
Should have said - encountered an odd IE rendering behaviour when trying to use background images instead!!! Couldn't fix it whatever I tried...
See http://cssbeauty.com/skillshare/comments.php?DiscussionID=409 -
This is an old discussion but oh well,
I would use 50% on the background, only my bullet lists have multiple lines, which puts the bullet below the top line.
Does anyone know how to vertically center the list-item? My bullet is going to the bottom of the line instead of centering vertically - it's a small square so it looks like this: . line item text -
- CommentAuthorjcamenisch
- CommentTimeAug 19th 2008
Claye,
If you want to center your background image on the first line of the li's text, position the background with em's rather than percent. As in
li {
padding-top: 5px;
background: url(bullet.gif) left 0.5em no-repeat;
}
This way the bullet height will scale with the text if needed (move down if text expands). A little experimentation might be needed to get just the right positioning. (Make sure to view it with text enlarged to get acceptable behavior in that scenario.) -
- CommentAuthorjcamenisch
- CommentTimeAug 19th 2008
I knew I had done that before, but only found the example after I posted. See ul li positioning at
http://www.uprootinganger.com/
css at http://www.uprootinganger.com/screen.css
1 to 9 of 9