[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 542
  • Last Modified:

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;
}
0
phillystyle123
Asked:
phillystyle123
  • 2
  • 2
  • 2
  • +1
1 Solution
 
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 StanyonCommented:
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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 StanyonCommented:
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now