Re: .css() px vs. em

Just as a follow up, here's how I helped Karl on AIM:

var num = parseFloat( val );

var type = val.slice(-2);

num *= 1.2;

$(...).css( "fontSize", num + type );

The difference in the reported fontSize is something we're looking at.

--John

On 1/6/07, Karl Swedberg <karl@...> wrote:

Hi folks,

I'm trying to get the font size of some text using the .css() method, but

I'm running into a problem because Firefox is returning the value in pixels

while IE6 is returning the value in ems. Is this a bug? Or is it just a

browser difference that we have to account for in our code?

Text is inside a div with ID of "container" and I have the following

relevant CSS:

body {

 font-size: 62.5%;

}

#container {

 font-size: 1.2em;

}

Here is what the browsers return for $('#container').css('fontSize') :

Firefox: 12px

IE6: 1.2em

Actually, it looks to me like IE6 is doing the right thing here, returning

the actual value from the stylesheet rather than a computed value.

This is a problem because I want to incrementally increase the font size. I

was doing that in Firefox by

1. getting the font size

2. stripping the "px" with parseInt()

3. multiplying the remaining number by 1.2

4. reattaching the "px"

5. setting the new font size

I know that in this case I can simply grab the last two letters of the

string and put them in a variable and attach them back after I do the

multiplication. But does anyone have an idea why the difference is there in

the first place, and if it should be there, and if there is a way to

normalize it?

Thanks all for your help.

--Karl

_________________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

_______________________________________________

jQuery mailing list

discuss@...

http://jquery.com/discuss/

_______________________________________________

jQuery mailing list

discuss@...

http://jquery.com/discuss/