font-size - using ems in ie8

hi - i was using pixels for my font size - all looked good in ie and ff but not in safari.

now, i switched to ems and all looks good in ff and safari but not ie8 - check it out:

http://midvalleydermatology.com/index_test.php

my style:

#topNav{
width:800px;
float:left;
margin-top:20px;
font:0.625em Verdana, Arial, Helvetica, sans-serif;
}
phillystyle123Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JF0Commented:
looks good to me. Whats wrong?
0
phillystyle123Author Commented:
well, ive been messing with it. it seems like if i make the em one pt to big, it knocks everything out of whack - so one browser will display it correctly or 2 will - but there's always one that doesn't seem to interpret the em the same way as the other 2 - is there some sort of doctype or something i need to add to get them to display correctly accross all browsers?
0
Chris StanyonWebDevCommented:
EM's are a relative font-size. For example, if you set the font-size of BODY to 1em, and then set the P element to 1.2em - the 1.2em is relative to the BODY. Change BODY to 2em, and your P's will double in size - even though the font-size is still set to 1.2em

Your #topnav is set to 0.938em which could be relative to any of it's parent elements, and as browsers have different defaults for different elements, this could explain the difference.

To level the playing field, and remove these browser differences, it's always a good idea to use a CSS reset, so instead of relying on each browser to use it's own setting, you're telling them exactly what you want.

A good resource for the CSS reset can be found here.

meyerweb.com/eric/tools/css/reset/




0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

s8webCommented:
Set a base font that's not relative on your body tag. You have:

font:12px/1.563em Verdana, Arial, Helvetica, sans-serif;

Change this to:

font:12px Verdana, Arial, Helvetica, sans-serif;

I don't get why so many people use em instead of % anyway. em is a print typography thing.
0
Chris StanyonWebDevCommented:
s8web: The 1.563em in the code sets the line-height - not the font size.
0
s8webCommented:
Thanks Chris, sorry about that oversight. Have you tried just setting the base body font to a specific size, also setting the line height to a specific size or omitting the line height for troubleshooting?
0
phillystyle123Author Commented:
thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.