homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Navwrapper interfering with page font sizes
font-size inheritance

5+ Year Member

Msg#: 4284257 posted 6:02 pm on Mar 19, 2011 (gmt 0)

Hi all

We have this in our page nav css

#navwrapper {margin:0px auto; padding:0; font-size:9pt; width: 860px}

However i am trying to change out page font size to em's and the navwrapper is interfering.

Is there a way we can clear this, i have tried changing it to 0.75em but it still seems to interfere.

I want the page to display as 1.0em but i have to set it at 1.1em or the font goes small?

<body><div id="whole">
<div id="navwrapper" align="left">

<div id="cheaperseo">
<div id="cheaperhols">

Thanks for reading




WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member

Msg#: 4284257 posted 10:15 pm on Mar 19, 2011 (gmt 0)

em's are inherited (they are virtually equivalent to using %), so they can get a bit complex. Why don't you change to px instead? They're also a relative unit and they will scale with the zoom function or screen resolution

pt's are for print so it's a good thing to change

if you are really keen to go for em's then the body should be set at 1em (or 100%) then no other size should be set on divs or parent elements.. just the element you need to change directly

h1 {font-size: 1.6em;} or small {font-size: 0.75em;}

as soon as you set it on a div or try to set it on every element, nesting of elements will affect it..

e.g. if you have your font-size set at 0.9em on the following
div, p, a {font-size: 0.9em;}

then have:
<div>some plain text <p> some paragraph text <a href="#">with a link</a></p></div>

the div ("some plain text") will be 0.9em (90%), the <p> will be 90% of the parent div's 0.9em - approximately 0.81em (81%), and the <a> will be 90% of the <p>'s 0.81em and will be approximately 0.72em (72%)

like I said best not to go there, px are good enough for font-sizes these days :) - it used to be that IE would not scale text that wasn't set in em though there was a workaround for that too, but I think that's only IE6

PS: also remember that em's and percentages will work with users default browser settings so what you see may not be what they're seeing ;) That is also true of pixels as users can set their own minimums but there's less of an overall impact with px..


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved