Well, I’ve been delinquent again with my regular posts here. Partially because I’m starting a new blog over at blog.zeitguys.com along with my other co-conspirators. But that’s no excuse.

Partially due to the encouragement of people who’ve stumbled upon some of my other tips and tricks, here’s a quickie that had me stumped for quite some time. I hope it’s of help.

The Issue:

When styling a SELECT tag using CSS and increasing the font size, in Explorer (7) the visual display area of the drop-down menu increases correspondingly. In Firefox, the form SELECT tag does not scale correctly – it cuts off some of the text. The larger the font size, the more the text gets cut off. This is the case regardless of whether you’re using pixels, points or ems. Line-height also has no bearing on it.

It turns out after some experimentation, and a completely random Google hit to some obscure Java CSS reference pages that gave me the idea, that in Firefox you also need to set the same font size in your OPTION tags.

So…

select, option {

	font-size:1.4em;

}

Will do the trick…

So remember, if you’re setting font-size in a SELECT tag, set the same font-size in your OPTIONs as well (unless you’re using a fixed width for the tag, in which case it doesn’t matter).