HTML: Select size different without options

Question

this might be a simple select box problem, but I don't find an answer so far: In my view, there are several multiline select boxes in a row, which are all defined to size=9. I use the size attribute instead of height because it fits the lines (no lines are cutted). Now my problem is that they got different height when they have no options in the select defined.

The options are filled with AJAX, but at the beginning some of them are empty.

You can view my problem here: http://jsfiddle.net/nq3gtb7u/5/ (It's okay in IE, but doesn't work in FF or Chrome)

However, I found out that the problem is the font-family Helvetica, Arial, while it works perfectly with nothing defined or Courier for example.

select.wrong
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
}
.wrong option
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
}

select.right
{
    font-family: Courier;
    font-size: 8pt;
}
.right option
{
    font-family: Courier;
    font-size: 8pt;
}

<select class="wrong" size="9" style="width:40%;">
    <option>A</option>
    <option>B</option>
    <option>D</option>
    <option>C</option>
</select>
<select class="wrong" size="9" style="width:40%;" >
</select>
<br>
<br>
<select class="right" size="9" style="width:40%;">
    <option>A</option>
    <option>B</option>
    <option>D</option>
    <option>C</option>
</select>
<select class="right" size="9" style="width:40%;" >
</select>

Now I wonder what I can do to make them the same height with or without options. I tried to set the height of the options, which have a small effect. If I set it like this

.wrong option
{
    font-family: Helvetica, Arial;
    font-size: 8pt;
    height: 9.75pt;
}

it is okay for FF at least, but not for Chrome. Besides, it looks dirty to me.

Thanks for your help!

Answer 1

Your select elements have different heights because option elements have line height and padding. The empty select elements have no option lines, so there is nothing to apply padding or line height to. Your browser is guessing the right height, but it fails obviously.

I would just set a min-height for empty select elements.