My entire layout is styled in font: XXpx and I am having problems rendering my navigation text size correctly in IE7. I have read how IE7 likes font sizing using ems better. Is there any easy hack to implement to get the text to the same size as other browsers?

Here is the CS for my drop down -

ul#navmenu-h li a, ul#navmenu-v li a {

border-left: none;
padding: 0 8px;
float: none !important;
float: left;
display: block;
font: bold 10px Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
line-height:26px;

}

1 answer

0
points

Hi Chris,

I actually couldn't get your dropdown menus to display properly in either of my browsers (FF 3.5.2 and IE8). However, I strongly recommend you browse through this great article by A List Apart: How to Size Text in CSS. Their eventual conclusions were that ems were best for rendering consistent text sizes.

The math for em actually isn't that bad - as long as you remember that 1 em is equivalent to 16 pts. To get any font size in ems, just divide by 16: 14 pts / 16pts = 0.875em.

Hope that helps,

-B

Answered about 7 years ago by Brian Y.
  • Brian, Thanks for answering so quickly! I read the article and switched my body over to % instead of px. It renders correctly in OS browsers and IE 7, how does it look in IE8 and FF 3.5? Thanks! Chris Chris Strom about 7 years ago
  • Browsers do not size fonts based on pt. pt is for printing, not the screen. Browsers usually use 16px which is a screen unit. Rob about 7 years ago