Question

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.