UL List: Ignoring Height Parameter

Hi gang,

I've been battling with this thing for a few hours now - it seems like something ultra-simple, but I can't for the life of me figure out what I'm doing wrong.

I'm trying to expand some <li> boxes to a height of 120px, but it seems to be ignoring all calls. I've tried specifying 120px in pretty much every CSS tag & xhtml "style" tag there is - but it's simply ignoring the call.

The <li> expands if I fill it with content of a sufficient height (for example, if I put a 120px high image in the box, it expands to 120px), but that isn't too helpful for my purposes. If anyone has any suggestions at all, I'd be most appreciative.

The probem is occurring in Firefox 2.0 - I haven't tested other browsers but I'd assume the problem is still there...

Many thanks,
- Supergrover

HTML:

<link rel="stylesheet" type="text/css" href="tabcontent4mess.css" />
<div style="position:absolute;top:289px;left:16px;z-index:50;">
<ul id="maintab" class="shadetabs">
<li class="selected">
	<a href="#" rel="tcontent1" >Search for Templates</a>
</li>
<li>
	<a href="#" rel="tcontent2">How to Use</a>
</li>
</ul>
</div>

Code (markup):

CSS:

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
height:120px;
}

.shadetabs li{
display: inline;
margin: 0;
height:120px;
}

.shadetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: url('opentab.png') top left repeat-x;
height:120px;
}

.shadetabs li a:visited{
color: #2d2b2b;
height:120px;}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
height:120px;}

.shadetabs li.selected{
position: relative;
top: 1px;
height:120px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(shadeactive3.gif);
border-bottom-color: #EEE;
height:120px;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
height:120px;}

Code (markup):

 

An inline element does not have a height property. This is meaningless.

.shadetabs li{
display: inline;
margin: 0;
[color=red]height:120px;[/color]
}

Code (markup):

Since you're aligning left, make li {float: left;}. A float element is block by default and has a height property.

cheers,

gary

 

*rapturous applause*

Ach! Of course! Many thanks Gary, most appreciated.

 

Another option is to declare the anchors as block level elements then give them a width of 100% (relative to the width of the list item) and the height of 150px.

Which is something I always do with my list items. If there's a link, the links get the bulk of the styles.