Grow your CSS skills. Land your dream job.

Font Size Inconsistencies

  • # December 6, 2011 at 12:02 pm

    This has bugged me for a while now, and there doesn’t seem to be a satisfactory solution.

    Basically I have a navigation bar and there are various elements within it, all with variable widths. Ok, In Firefox some of the li > anchor elements are showing 1px less in width then there Webkit counterpart. The result of this is that the navigation bar doesn’t fit the width of the size perfectly in Mozilla.

    What is the solution? I prefer to not use specific widths if I can help it, although I fear that will eventually be the dirty solution.

    If I can avoid that it would be preferable.

    # December 6, 2011 at 12:21 pm

    What I have discovered is for one of the elements which are showing as 50px wide in Webkit, they are showing as 49.4333px in Mozilla.

    # December 6, 2011 at 1:10 pm

    You might could try -moz-font-size-adjust. Here’s a link to a reference about it. Be sure to use the “-moz-” prefix so other browsers don’t use it as well.

    # December 7, 2011 at 4:47 am

    Hmm, not really sure this is the solution.

    I am using fonts.com and specifically this font – ITC Franklin Gothic Compressed Book.

    # December 7, 2011 at 5:49 am

    Does your license specify you can embed that font onto your site?

    # December 7, 2011 at 5:54 am

    “I am using fonts.com”

    # December 7, 2011 at 6:01 am

    Thank you for making that bold to clarify.

    # December 7, 2011 at 6:11 am

    Well didn’t really see what your comment had to do with the issue.

    # December 7, 2011 at 6:24 am

    Right, so if I may try to help, your problem is basically that you want to fix an issue which Mozilla is rendering a half of a pixel differently than Webkit browsers?

    # December 7, 2011 at 6:37 am

    Pretty much. It seems the box model for Mozilla is flawed. For now I have decided to give each nav element a fixed pixel width. Which will only work as long as the navigation items remain set. An idea that was bandied around was using Javascript to calculate the width of the bar, and assign values to all the elements.

    Mind you even if I manage to solve this box model issue then that wouldn’t prevent the elements from breaking should the editor decide to amend the navigation.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".