Question

I’ve got a problem with IE8.

I’ve got a select box to choose capacitance units pF, nF and mF.

Now, the text is a little bit down, even though I set padding:0, and it cuts the text.

And so the ‘pF’ option actually looks like ‘nF’ which is unacceptable.

I wonder if there is any fix at all. I can’t think of nothing other than setting padding to 0 which doesn’t work once again. Setting small line-height also doesn’t do anything either.

CSS:

select {
    width: 40px;
    height: 16px;
    padding: 0px;
    font: 8pt Helvetica;
}

Any ideas?

Edit: There you go for JSFIDDLE:

http://jsfiddle.net/zuYsF/

See that ‘pF’ is selected by default, and it actually looks like ‘nF’.

Answer 1

I don’t think this is padding causing a problem, this might have more to do with line-height

So try setting the line height to the height of the box minus the border top and border bottom (which seems to be 4px in total judging by that image from looks…) that height is probably about 12px…

line-height: 12px;

If this doesn’t fix it you will have to reproduce it in jsfiddle so we can tinker with the code to give an actual working example back to you.

Please note that form elements are notoriously unreliable styling wise, and you can’t get away with everything. display: block can do wonders, but wouldn’t help in this case.

This seems to be cheer limitation of the <select> tag styling… In all browsers really.

You might want to check this question, which doesn’t seem totally unrelated.

I want to vertical-align text in select box