Setting height of <li>

cotton31 · 18 Jun 2009 at 22:32

Hi,

I have a menu-bar div which contains a ul with 4 li's inside it.

The height of the div is 100px and has a gradient background image applied.

I want to make the height of the li's the same as the height of the div, so I can have borders going to to bottom. At the moment, the height of the li is only as big as the text, and won't change regardless of where i attach height: 100px;

Any advice?

Tripnologist · 18 Jun 2009 at 22:39

The best thing to do is display: block your 'ul li a' and then set height on it (or padding even). That way the whole block will be clickable. You'd also be able to change border and/or background color on hover.

cotton31 · 18 Jun 2009 at 22:43

This sorts the height issue, but now my buttons appear below each other (I have display: inline applied to the ul li tag), how do I fix this?

Cheers for the speedy reply by the way!

cotton31 · 18 Jun 2009 at 22:47

Fixed it with a float: left to the li tag.

Cheers for the help!

Tripnologist · 19 Jun 2009 at 08:27