[jQuery] .css() px vs. em

[jQuery] .css() px vs. em

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Hi folks,<DIV><BR class="khtml-block-placeholder"></DIV><DIV>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?</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Text is inside a div with ID of "container" and I have the following relevant CSS: </DIV><DIV>body {</DIV><DIV> font-size: 62.5%;</DIV><DIV>}</DIV><DIV>#container {</DIV><DIV> font-size: 1.2em;</DIV><DIV>}</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Here is what the browsers return for $('#container').css('fontSize') : </DIV><DIV>Firefox: 12px</DIV><DIV>IE6: 1.2em</DIV><DIV> </DIV><DIV>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.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>This is a problem because I want to incrementally increase the font size. I was doing that in Firefox by </DIV><DIV>1. getting the font size </DIV><DIV>2. stripping the "px" with parseInt()</DIV><DIV>3. multiplying the remaining number by 1.2</DIV><DIV>4. reattaching the "px"</DIV><DIV>5. setting the new font size</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>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?</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Thanks all for your help.</DIV><DIV><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN> </DIV><BR></DIV></BODY></HTML>_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/