IE Scaling Font-Sizes

Hey,

I’m using relative font-sizes to control the layout in different resolutions. And I’ve notices one very big issue in IE. The following code works as I believed it should in NS:

[CODE]<div style=”position: absolute; display: inline; width: 36em; height: 2em; text-align: center; border: 1px solid blue;”>
<img style=”width: 5em; height: 1.5em; float: left; margin-top: 0.2em;” src=”#” />
<img style=”width: 4em; height: 1.5em; float: right; margin-top: 0.2em;” src=”#” />
<span style=”font-size: xx-small;”>
I am trying to center text in between two images.<br />
There are two lines, thus ‘xx-small’ is needed.
</span>
</div>[/CODE]

However, IE doesn’t scale the text the same as NS. It’s like IE skips the ‘smaller’ or ‘smallest’ text-size depending on what the CSS value is. I had to extend the div container’s width by 10em just so that the text wouldn’t wrap in the ‘smallest’ size, thus breaking the div’s height.

So I decided to make it 0.6em rather than ‘xx-small’ and it worked fine, that is until I discovered it becomes the opposite. So know the div would break on ‘large’ and largest.’ It’s one or the other, either way it’s messed up. The only fix I found was to make the div large enough that the text wouldn’t wrap. But then there’s a lot of extraspace in NS, even though the text-size is illegible. But I’m thinking someone using 640×480 or 800×600 *might* use the smallest text-sizes available. I thought of setting the div to overflow: hidden, and scaling down the div width, as the site is being optimized for 800×600/1024×768. But, I had to keep that minority in mind and didn’t want to lose the bottom line, which contains a link.

Is their a solution? Or is it another IE box model/bug/quirk? I could really use that extra 10em (a sixth of my width) elsewhere….

Also in #CSS _↴