CSS problem with unordered list

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

CSS problem with unordered list

Post by barb woolums »

I can't get an image and the text vertically aligned in an unordered list (seems to be a recurring problem for me). I tried vertical-allign : middle on the li and a few other tricks I found around the internet to no avail

here's the html

Code: Select all

<ul id="sortme" class="ui-sortable">
<li id="aisle_6">
<img class="handle" alt="move" src="http://webrecipemanager.com/images/arrow_down_up.png">
Herbs & Spices
</li>
<li id="aisle_5">
<img class="handle" alt="move" src="http://webrecipemanager.com/images/arrow_down_up.png">
Nuts
</li>
<li id="aisle_10">
<img class="handle" alt="move" src="http://webrecipemanager.com/images/arrow_down_up.png">
Meat
</li>
</ul>
and the css

Code: Select all

#sortme li {
	margin-bottom:3px;
	height:35px;	
	-webkit-border-radius: 4px;	
	-moz-border-radius: 4px;	
	border-radius: 4px;	
	border: 1px solid #5d0304;	
	padding:2px 5px 0 5px;	
	text-decoration:none;	
	background:#eba8a0;	
	width:200px;	
	color:#FFFFFF;	
	cursor:pointer;	
	font-size:13px;	
}
Currently it looks like the image attached
Screenshot_11.jpg
Screenshot_11.jpg (5.26 KiB) Viewed 15469 times
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: CSS problem with unordered list

Post by s.dot »

Moved to Design

Try setting line-height: 35px, the same height as your li element.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: CSS problem with unordered list

Post by barb woolums »

That made no difference with or without vertical-align: middle
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

[SOLVED] CSS problem with unordered list

Post by barb woolums »

Finally worked it out.

Put the text in a span and put vertical-align: 50% on the span.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: CSS problem with unordered list

Post by s.dot »

Oh, I see what your problem is now. I think your images should be a background image and then you wouldn't have to worry about the extra span element. vertical align affects the vertical alignment of the element relative to the element it's contained in.

But if it works it works. :)
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: CSS problem with unordered list

Post by mecha_godzilla »

Just to add to that last comment, it's definitely worth setting the images as backgrounds because you can then use

Code: Select all

background-position: center center;
in your style to make sure that they're always centered correctly relative to the element, and you can also change the images for rollover events, etc. Trying to get two different page elements to vertically align exactly is often difficult, especially with things like radio buttons and text labels, so take the image out of the equation and you halve the problem :) Plus, you only have to declare the image once (in the style sheet) no matter how many list items you have.

M_G
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: CSS problem with unordered list

Post by s.dot »

+1 to everything mecha_godzilla just said.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
mecha_godzilla
Forum Contributor
Posts: 375
Joined: Wed Apr 14, 2010 4:45 pm
Location: UK

Re: CSS problem with unordered list

Post by mecha_godzilla »

s.dot wrote:+1 to everything mecha_godzilla just said.
Thanks s.dot - I think that must be my first +1 on any forum ever! I'd better retire now while I'm on a roll :mrgreen:
Post Reply