• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 561
  • Last Modified:

Font size differences IE & FF

Hi on this page I'm looking at the font sizes for the sub menu ares "Statement, Background, Leadership..." are quite different in IE7 and FF3. Could someone tell me why and perhaps recommend the best fix.

Here is the page: http://lonerganpartners.seowebsales.com/marks-statement

Thanks,
Reg.
0
RegProctor
Asked:
RegProctor
  • 3
  • 3
  • 2
  • +1
2 Solutions
 
Tom BeckCommented:
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/
0
 
Eternal_StudentCommented:
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;}

Open in new window


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



0
 
deegoy418Commented:
Hi

Please give the font size value in pixel, so that all browser can show the font size in the pixels, I have attached a screenshot, in that you can see that "Statement, Background, Leadership..." are in pixels and having same size.

please let me know if this solutions doesn't work for you.

regards
 screen shot
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Eternal_StudentCommented:
There's no need to set the font size in pixels if you are using ems correctly.
0
 
deegoy418Commented:
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.

0
 
RegProctorAuthor Commented:
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.
0
 
RegProctorAuthor Commented:
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".
0
 
Eternal_StudentCommented:
I understand, so Drupal is spitting out the markup and you have decided to just accept what it throws out? That is fair enough. For font-size, EMs are relative to the parent's font-size. I think IE has a problem with this inheritance, it is a know bug.

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

Featured Post

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.

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