IE font size decrease does not cause select box height to decrease

Question

I have a font resize function on my page which increases the font size via javascript for the entire page.

This works fine in most browsers except IE. When decreasing the font size after increasing it, the select boxes new height does not decrease, even though the font size is decreasing on it. Instead the smaller font appears to be padded with white space.

Any ideas as to what IE is doing here, and a work around?

function setFontSize(newFontSize)
   $('select').css("font-size", newFontSize);
}

Answer 1

After IE renders the select box, you cannot change the style of it with javascript (only adding, removing elements, not style or stuff like that). That's not a good thing.

As a work-around what I've done is creating a new select box (clone of the first) with the style that I desire, and then add it as a child of the container tag. That will display it correctly.