Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Why all fonts larger in Firefox (only) - see css

    I created a page in DW CS, specifying font sizes in em. The preview looks fine in IE and DW design view. But in Firefox all the fonts are proportionately enlarged by about 1.5x.

    Can someone please have a look at my CSS below and see where the problem might be?

    Any other suggestions regarding the code in general would also be appreciated since I am obviously still in the learning stages. Thank you.

    @charset "utf-8";
    /* CSS Document */

    body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    letter-spacing: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1.25;
    color: #000000;
    }

    a:link {
    color: #8b3514;
    text-decoration: none;
    }

    a:visited {
    color: #8b3514;
    text-decoration: none;
    }

    a:hover {
    color: #8b3514;
    text-decoration: underline;
    }

    a:active {
    color: #8b3514;
    }

    .italic {
    font-size: .75em;
    font-style: italic;
    color: #000000;
    text-decoration: none;
    }

    h1 {
    font-size: 1.5em;
    font-weight: bold;
    }

    h2 {
    font-size: 1.25em;
    font-weight: bold;
    }

    h3 {
    font-size: .1em;
    font-weight: bold;
    }

    #head-container
    {
    color: #000000;
    background: #000000;
    }

    #header
    {
    margin: 0 auto;
    width: 980px;
    padding: 0 auto;
    background: #ffffff;
    }

    #header h1 { margin: 0; }

    #navigation-container
    {
    float: left;
    width: 100%;
    color: #000;
    background: #000000;
    }

    #navigation
    {
    margin: 0 auto;
    width: 980px;
    }

    #navigation ul
    {
    margin: 0;
    padding: 0;
    }

    #navigation ul li
    {
    list-style-type: none;
    display: inline;
    }

    #navigation li a
    {
    display: block;
    float: left;
    padding: 5px 15px;
    color: #ffffff;
    text-decoration: none;
    border-right: 1px solid #ffffff;
    }

    #navigation li a:hover { background: #7d26cd; }

    #content-container
    {
    float: left;
    width: 100%;
    color: #000;
    background: #ffffff;
    }

    #content-container2
    {
    margin: 0 auto;
    width: 980px;
    }

    #content-container3
    {
    float: left;
    width: 980px;
    background: #ffffff;
    }

    #content
    {
    clear: left;
    float: right;
    width: 650px;
    padding: 40px 50px 40px 15px;
    margin: 0;
    display: inline;
    }

    #content h2 { margin: 0; }

    #aside
    {
    float: left;
    width: 200px;
    padding: 40px 15px 40px 45px;
    margin: 0;
    display: inline;
    }

    #aside h3 { margin: 0; }

    #footer-container
    {
    clear: left;
    color: #ffffff;
    background: #000000;
    line-height: 1.5em;
    }

    #footer
    {
    margin: 0 auto;
    width: 980px;
    text-align: center;
    padding: 0px;
    height: 20px;
    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    In firefox go to top menu and click View>Zoom>Reset or just use Ctrl-0.
    See if that helps.

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I've noticed the same thing. In IE and Chrome, my font is one size, but in Firefox my font appears just a tad bigger. And yes my zoom is set at default 100% in all browsers. My font styling- font: 1em Arial, "Helvetica Neue", Helvetica, sans-serif . I've tried px and pt as well, but Firefox is always a bit bigger regardless. It is really annoying, and can also cause overflow problems. Glad I found someone else who noticed this, because I've searched all over and it seems noone else is really aware of this or taking any notice to it..

    I've also noticed that image coloring is slightly different in Firefox as well. In IE and Chrome images appear normally as they should, but in Firefox the colors appear a bit 'washed out' looking. Apparently FF renders some things a little differently than the other browsers..

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    To both pnielsen and resin, a em is a relative size font size. According to the W3C an em:

    "is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element."

    They take on their size values based on where they are in a Web browser. Most of the time 1em = 16px, but users can change their default font size in their browsers. If you use ems for fonts (as you should) you should use them for everything such as width, height, padding, margins, etc..
    point in case:
    Code:
    #content
    {
    clear: left;
    float: right;
    width: 650px;
    padding: 40px 50px 40px 15px;
    margin: 0;
    display: inline;
    }
    If you use relative sizing the page should look the same regardless of the browser. It may be a little smaller or a little bigger, but everything would be adjusted accordingly.

    In my comparison of the FF and chrome browsers I did not see what your seeing, but using
    h3 font-size: .1em; It is almost unreadable in FF.

  • Users who have thanked sunfighter for this post:

    pnielsen (06-19-2012)

  • #5
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I made a little test sample so you can see what I'm seeing. I viewed the same exact text in IE and FF and took a screenshot of each, and placed them side by side. You'll see that the font is a little bigger in FF. The font is set the same for both at 1em, and no code was touched in between. Also as I said earlier, I tried font sizes in px and pt as well, and got the same exact results. The font is always a little bigger in FF than it is in IE and Chrome.



    and here is the actual page I used in this test- http://resin.webs.com/new2.html

  • #6
    New Coder
    Join Date
    Apr 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Sorry, the .1em should have been 1em (typo). Point taken about using em for all parameters. Thanks.

    I "reset" Firefox zoom as suggested, but it did not affect the situation. My FF screen font is MUCH larger than the comparison "resin" showed. I actually have to click twice on "zoom out" to get it the same size as IE and in DW design view.

    Font sizes when routine internet browsing are fine.

    If there is nothing telling in my CSS, could there be a problem with the page's HTML? If so, what types of tags would cause this?

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,772
    Thanks
    23
    Thanked 550 Times in 549 Posts
    Font sizes when routine internet browsing are fine.
    Are you saying things look OK when on the internet but not good in DW?

  • #8
    New Coder
    Join Date
    Apr 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Finally got to the bottom of it, by process of elimination. It was due to my somewhat scrambled HTML code on the page. Somehow FF choked on it while IE was OK. No need to go into detail, since it's probably a one-off. Thanks to everyone for their assistance..


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •