0

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);
}
cweston
  • 11,297
  • 19
  • 82
  • 107
  • 1
    We'd need to see code. That said, I'd suggest that a font resizer widget might be unnecessary for two reasons 1) Browsers have this feature already built in 2) Newer browsers do it quite nicely with a full page zoom rather than pure font resizing. – DA. Mar 17 '10 at 14:59
  • Is that jQuery? If so, tag it. – Šime Vidas Feb 15 '11 at 17:28
  • Have you tried changing line-height along with the font-size change? Not sure if it would have the desired effect, but it's worth a shot – nybbler Feb 27 '11 at 04:53

1 Answers1

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.

jpabluz
  • 1,200
  • 6
  • 16
  • I am able to change the font-size fine, and increasing the height via the font-size seems to work fine. It only seems to be the height not wanting to decrease once it has already been increased, even though the font-size is smaller. – cweston Mar 17 '10 at 15:06