#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Location
    St. Louis
    Posts
    235
    Rep Power
    31

    Text Not displayed the same in Chrome/Opera as displayed "Correctly" in Firefox/IE


    If you go here

    company.com layout

    It looks correct in IE or Firefox

    But in Chrome/Opera the text is a different Font and is bigger and it messes stuff up.

    Here is the CSS where font is defined for body. All other elements are defined with the same Font declaration.

    body
    {
    background: #e3edc2; color: #333;
    font: .8em, arial, helvetica, sans-serif;
    margin: auto;
    padding:0px;

    }
  2. #2
  3. The Queen of Typos
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2004
    Location
    Treasure Coast
    Posts
    1,471
    Rep Power
    195
    This happens because em is a relative font-sizing method versus using px which is exact. So by saying font: .8em in your body definition the font size is being displayed relative to the height/width of the body element.

    If you can its best to avoid sizing fonts and letting the user's browser pick for you. If this doesn't fit your design, then set the font-size of the parent element to what you want instead of in the body definition.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Location
    St. Louis
    Posts
    235
    Rep Power
    31
    Originally Posted by elkehinze
    This happens because em is a relative font-sizing method versus using px which is exact. So by saying font: .8em in your body definition the font size is being displayed relative to the height/width of the body element.

    If you can its best to avoid sizing fonts and letting the user's browser pick for you. If this doesn't fit your design, then set the font-size of the parent element to what you want instead of in the body definition.
    thanks.. but I'm still wondering why the font itself is different. If you look at the page in IE/Firefox then look at Opera/Chrome the font is completely different.
  6. #4
  7. The Queen of Typos
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2004
    Location
    Treasure Coast
    Posts
    1,471
    Rep Power
    195
    I understand what you're looking for more clearly now, I noticed the different as well.

    You have a typo in your css:

    Code:
     font: .8em, arial, helvetica, sans-serif;
    should be
    Code:
     font: .8em arial, helvetica, sans-serif;
    You don't need a comma after the .8em.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Location
    St. Louis
    Posts
    235
    Rep Power
    31
    Originally Posted by elkehinze
    I understand what you're looking for more clearly now, I noticed the different as well.

    You have a typo in your css:

    Code:
     font: .8em, arial, helvetica, sans-serif;
    should be
    Code:
     font: .8em arial, helvetica, sans-serif;
    You don't need a comma after the .8em.
    THANKS! that was it. I knew it was something simple. I took out the comma, refreshed all the pages (ctrl+F5 to reload css), and the font was correct in Chrome and Opera. Since the font was corrected the relative size changed for the better too!

    Thanks!
  10. #6
  11. The Queen of Typos
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Sep 2004
    Location
    Treasure Coast
    Posts
    1,471
    Rep Power
    195
    It's amazing what little things can do. I didn't even notice it the first time around!

    Glad it's working
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2008
    Location
    St. Louis
    Posts
    235
    Rep Power
    31
    Originally Posted by elkehinze
    It's amazing what little things can do. I didn't even notice it the first time around!

    Glad it's working
    lol queen of typos! so right. you called that one.

IMN logo majestic logo threadwatch logo seochat tools logo