Font size differences IE & FF

If you change the font size for those links from 0.98em to 98%, they will look the same in all browsers. Here's an explanation:

http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

I think the problem here is with your mark up.

You have a series of nested lists where you could really simplify this component by using a div and then may be an unordered list for the 'Statement, background ...' copy.

The following CSS is being applied twice (because of the nested list) and therefore you are getting an em value of an em value. You need to be careful if you are using ems as parent styling will have an effect on child elements and you get different results in IE and FF.

 

#mark-lonergan-menu .submenu li {font-size: 0.985em;}

Select allOpen in new window

So either change your HTML as suggested above OR removed the em styling from one of the lists.

There's no need to set the font size in pixels if you are using ems correctly.

my solution works fine all browsers, because px value is give same out put in all browsers while ems may be different in different browsers, specially in IE browser.

tommyBoy - At the very bottom of the article there is an update which says as long as you use percentage in the body tag em will be consistent. I think I did better by fixing the font with an exact pixel size in the body tag so em should be consistent as far as I can tell according to that article.

Eternal_Student - this is CMS generated HTML (Drupal) so I don't have a lot of room here to play with HTML. However, the markup is fully verified with Strict mode at w3c and do I don't really think that is an issue.

deegoy418 - This works for this problem which is great (thanks) however it shouldn't be necessary.

What I really want to know is why is using em at this one place in the HTML inconsistent when everywhere else it works just fine. If I know why then I should be able to tweak the CSS so that it's no longer a problem.

Guys, I would appreciate it if you didn't take snapshots of the page.

This is under development and my client is not going to take kindly to an image with their names and faces on some other website like this.  Especially when the page has yet to be vetted and the site is not meant to be live. In fact, I just opened it up for you to see to solve this problem, usually all you would see is "under construction".

I looked around and yeah, IE has several font sizing bugs even across its latest versions.