Question

I am trying to create a menubar with a few links in it. Here is my relevant code:

CSS:

#menuBar {
    overflow: auto;
    padding: 0px 0px;
    margin: 15px 0px;
}
div#menuItem ul li {
    padding: 0px 20px 0px 20px;
    list-style-type: none;
    display: inline;
}
div#menuItem ul a {
    font-size:14px;
}

HTML

<div id="menuBar">
<div id="menuItem"> 
<ul>
<li> <a href="index.php"> HOME</a> </li>
<li> <a href="index.php"> ABOUT</a> </li>
</ul>
</div> <!-- Menuitem closes -->
</div>

So, the Problem here is that the minimum height of the menuBar remains fixed. I want it to show up a little smaller. I try setting the padding of #menuBar {padding -5px 0px }. But, nothing happens.

How do I do that. And if I completly removing the code for padding. The height of the div becomes so small that it is just enough to accomodate the text.

Answer 1

put a height to the div… either by using the line-height or height properties.