CSS Menu: Fixed height

~J~ · 15 Jan 2008 at 13:40

Trying to do a CSS menu for my site which I thought would be pretty easy.

In a nutshell I've got 3 images:

Left: 30px wide by 70px high
Middle: 10px wide by 70px high
Button: 110px wide by 70px high.

What I just can NOT do for the life of me is create an inline list and set the height equal to 70px NOR can I set the width of the button <LI> tags to be 110px wide!

Here's my CSS:

Code:

#menu
{
  width: 800px;
  height:70px;
}
#menu ul
{
 background: url('images/menu-m.png') center center repeat-x;
 float:left;
}
#menu ul li { 
 list-style: none;
 display: inline;
}
#menu li#left
{
 float:none;
 background: url('images/menu-l.png') no-repeat;
 width: 30px;
}
#menu li.button
{
 background: url('images/menu-b.png');
 width: 110px;
 color: #FFFFFF;
 float: none;
}
#menu a:link {  color: #fff;  text-decoration:none; }
#menu li#right
{
 float:none;
 background: url('images/menu-l.png') no-repeat;
 width: 30px;
}

and my HTML is like this:

Code:

  <div id="menu">
  <ul>
   <li id="left"></li>
   <li class="button"><a href="#">home</a></li>
   <li class="button"><a href="#">services</a></li>
   <li class="button"><a href="#">showcase</a></li>
   <li class="button"><a href="#">contact</a></li>
   <li id="right"></li>
  </ul>
  </div>

Is there any way to have the height of a CSS menu fixed at all?

Flanders · 15 Jan 2008 at 14:01

Use "display:block" for your ul/li. That should allow you to assign fixed height/width.

~J~ · 15 Jan 2008 at 14:03

Oh, you're a star!!! Actually used inline-block now as it's a horizontal menu, but thanks for that. Hardly got any hair left I've pulled that much out!!

evismaniac · 16 Jan 2008 at 15:30

web design can be a *****! Iv pulled much hair out stressing over stupid little things that have probably taken longer than the rest of the whole site took me!

MarcLister · 16 Jan 2008 at 15:31

Web design can be quite frustrating yes. However could you fully star out your sweary please?

Sic · 16 Jan 2008 at 17:21

rather than using inline-block (didn't validate last time I used it!) you could do something like this:

Code:

ul {
 overflow: hidden
}
li {
 width: 100px; /*change to whatever you want an individual menu item to be*/
 float: left;
}

that's what I came up with when needing to do the same as you

edit: also worth noting that height is a bit silly when it comes to IE6 - it interprets it as min-height. may not affect you, but something to consider if it does