Making CSS Tabs a Specific Width and Height

Question

Hi,

I am trying to set up CSS Tabs and I'd like them to be the same height and width. How do I do this w/ the following CSS:

#master_tab_layout
{
        height: 35px;
}


#master_tab_layout li
{
        display: inline;
        overflow:hidden;
        list-style-type:none;
        background-color:#FE000C;
}

#master_tab_layout a, a.active
{
        color: #DEDECF;
        background: #0EB1E8;
        font: bold 1em "Trebuchet MS", Arial, sans-serif;
        border: 2px solid black;
        padding: 2px 5px 0px 5px;
        margin: 0;
        width:150px;
        text-decoration: none;
}

#master_tab_layout a.active
{
        background: #FE000C;
        border-bottom: 3px solid #ABAD85;
}

#master_tab_layout a:hover
{
        color: #fff;
        background: #FFF;
}

#master_tab_layout a:visited
{
        color: #E8E9BE;
}

#master_tab_layout a.active:hover
{
        background: #FE000C;
        color: #DEDECF;
}

... and the subsequent HTML:

<div id="master_tab_layout">
  <ul>
    <li><a href="/howtoorder">How To Order</a></li>
    <li><a href="/about_us">About Us</a></li>
  </ul>
</div>

Answer 1

#master_tab_layout ul li {
width: 50px;
height: 25px;
}

That'll just set the size. If you want them vertical you'll need to use display: block;

also, don't use a:active to change the font. It may change the size and be annoying to users.

Answer 2

change all master_tab_layout to #master_tab_layout

Answer 3

If you want the links to size up to the same width and height, declare the links in the list themselves to show up as block elements. Otherwise, any setting of the width and height will be ignored since it is an inline element. See below for the line you will need to add into the CSS declaration for #master_tab_layout a you already have.

#master_tab_layout a
{
    display:block;
}

Now you will be able to set the height and width of the links in the tab list to the size you wish.

To have the list items not sit under each other, and sit side-by-side, you will also need to float the li elements. See below for the lines you should add into the CSS declaration for #master_tab_layout li you already have.

#master_tab_layout li
{
    float:left;
    margin:0 2px 0 0;
}

The margin set in the above will put a thin 2 pixel buffer on the right of each item in the list so that they're not all butting up against each other.

You're also showing up white text on white background when you hover over one of the links. It would be a good idea if you had a contrasting text colour so that the user would still be able to know what tab/link they're hovering over. Maybe something like this:

#master_tab_layout a:hover
{
    color: #000;
    background: #fff;
}