Why is the text in a dropdown menu higher than the text in the adjacent div?

Question

Using Blueprint CSS, I created a header row on my page.

What I don't understand is why the dropdown menu appears slightly higher in the row than the text in the div to the left of it ( The quick brown fox jumped over the lazy dog ).

If I add the prepend-top class to the dropdown div, the dropdown appears slightly lower than the text in the adjacent div ( The quick brown fox jumped over the lazy dog ).

How do I get the text in both elements to appear on the same horizontal level in the row?

    <div class="span-24 last">

        <div class="span-21">The quick brown fox jumped over the lazy dog</div>

        <div class="span-3 last">
            <select name="test" id="test">
                <option id="test1" value="test1" selected>test1</option>
                <option id="test2" value="test2" selected>test2</option>
                <option id="test3" value="test3" selected>test3</option>
            </select>
        </div>
    </div>

CSS:

body
{
    font:12px/18px 'Times New Roman',Times,serif;

}

#test
{
    font: 170% 'Times New Roman',Times,serif;
}

As you can see from the CSS, the font for the dropdown is considerably larger than the font for the rest of the text on the page.

Answer 1

When you use the shorthand Font property and you leave off some of the values, those values aren't inherited, they are reset to their "initial value".

So in your example because you didn't define a line height in your descendent, it was reset -- it did not inherit the 18px.

http://www.w3.org/TR/CSS2/fonts.html#font-shorthand

It's probably also complicated a little more by the fact that you are lining up a Select element which may have some additional issues depending on which browser and platform your browsing on because some browsers use native system widgets for form elements.