Welcome to WebmasterWorld Guest from 54.198.60.39

Forum Moderators: not2easy

Message Too Old, No Replies

Navwrapper interfering with page font sizes

font-size inheritance

     
6:02 pm on Mar 19, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 21, 2006
posts: 83
votes: 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

Mike
10:15 pm on Mar 19, 2011 (gmt 0)

Senior Member

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

joined:Oct 1, 2002
posts:5199
votes: 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

e.g.
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..

hth
Suzy