Welcome to WebmasterWorld Guest from 54.196.224.166

Forum Moderators: not2easy

Message Too Old, No Replies

Navwrapper interfering with page font sizes

font-size inheritance

     

cheaperholidays

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

5+ Year Member



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

SuzyUK

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

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



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month