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 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Font rendering IE / FF / Safari

    Hello, hopefully someone can help me on this matter!

    Although my CSS / XHtml is fully validated - all three browsers choose to render fonts in a different manner.





    I can't figure out how to have all fonts rendered like Firefox does.

    Here's the CSS excerpt:

    Code:
    #navigation li a:link, #navigation li a:visited {
      font-size:1.14em;
      display: block;
      padding: 0.4em 0 0.4em 1.3em;
      border-left: 0px /*solid #ffffff;*/;
      border-right: 0px /*solid #ffffff*/;
      background: #d7d8d8 url(../images/menu_background.png) center top;
      /*background-color: #ffffff;*/
      color: #000000;
      text-decoration: none;
      }
    I hope this information is sufficient to solve the problem, if not I will glady provide any needed code.

    This one has really got me stumped - can someone please help out?

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,475
    Thanks
    6
    Thanked 980 Times in 953 Posts
    You are currently using a relative unit to set the font size. And as all relative units em is relative to the font size of the parent element(s). Every user can set a different default font size in their browser to which these sizes may relate so it’s advisable to use an absolute unit as base font size and make the relative units relative to this.

    Then as another problem I can see from your code snippet: Different browsers have a different interpretation of decimals. I. e. Firefox may make a size increase from 1.1em to 1.12em while IE only makes a difference from 1em to 1.15em, and the decimals in between are ignored. You better keep it to 0.05 steps at least.

    It would help if you sowed us your entire code to make more accurate assumptions.

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your response. I thought preseting a snippet is easier to handle, rather than posting the entire code - having you sort out what's important and what isn't.

    Code:
    CSS:
    
    *{
      margin: 0;
      padding: 0;
    }
    html{
      height: 100%;
      overflow:scroll;
    }
    body{
      height: 100%;
      text-align: center;
      background-color:#d8d8d8;
    }
    .clear{
      clear:both;
    }
    * html #container_nonFooter{
      height: 100%;
    }
    #container_nonFooter{
      position: relative;
      width:960px;
      min-height: 100%;
      text-align:left;
      background: #d7d8d8 url(../images/internet_design_bg.jpg) repeat-y center top;
      /*background-color: #f0ff00;*/
    }
    #container_wrapper{
      padding-bottom: 9em;
      background: #d7d8d8 url(../images/internet_design_bg.jpg) repeat-y center top;
      /*background-color: #00ff00;*/
    }
    #container_foot{
      position: relative;
      height: 83px;
      margin-top: -83px;
      text-align:left;
    }
    #container_center{
      height:100%;
      width:960px;
      min-height:100%;
      margin: 0 auto;
    }
    #navigation {
      width:202px;
      margin-left:116px;
      margin-right:18px;
      margin-top:17px;
      float:left;
      background: #d7d8d8 url(../images/menu_background.png) repeat-y center top;
      /*background-color:#d700ff;*/
    }
    #content {
      width:445px;
      float:left;
      padding:18px 12px 12px 12px;
      /*background-color:#10f2f2;*/
    }
    #footer{
      width:960px;
      height:83px;
      margin-left:0px;
      text-align:center;
      background: #d7d8d8 url(../images/web_design_ft.jpg) center top;
      /*background-color:#ffffff;*/
    }
    
    
    
    
    
    /* --- Naviagation START ---*/
    #navigation ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #navigation li {
      border-bottom: 0px /*solid #ffffff*/;
      border-top: 0px /*solid #ffffff*/;
    }
    #navigation li a:link, #navigation li a:visited {
      font-size:1.14em;
      display: block;
      padding: 0.4em 0 0.4em 1.3em;
      border-left: 0px /*solid #ffffff;*/;
      border-right: 0px /*solid #ffffff*/;
      background: #d7d8d8 url(../images/menu_background.png) center top;
      /*background-color: #ffffff;*/
      color: #000000;
      text-decoration: none;
      }
    #navigation li a:hover {
      font-size: 1.14em;
      background: #d7d8d8 url(../images/menu_active.png) center top;
      /*background-color: #ffcc33;*/
      border-left: 0px;
      color: #333333;
    }
    .menugfx {
      display: block;
    }
    /* --- Naviagation END ---*/
    
    
    
    /* --- Fonts & Formatting START ---*/
    img {
      border-style: none;
    }
    p{
      padding-bottom:1em;
      font-size:0.8em;
      font-family:Verdana, Helvetica, sans-serif;
    }
    p.note{
      font-size:0.6em;
      font-family:Verdana, Helvetica, sans-serif;
    }
    p.backlink{
      text-align:center;
      font-size:0.6em;
      margin-top:0.6em;
    }
    img.contentimage{
      margin-bottom:30px;
    }
    h1{
      font-size:1.14em;
      font-family:Verdana, Helvetica, sans-serif;
      padding-bottom:0.6em;
    }
    h2{
      font-size:0.8em;
      font-family:Verdana, Helvetica, sans-serif;
      padding-bottom:0.5em;
    }
    ul{
      font-size:0.8em;
      padding-left:16px;
      font-family:Verdana, Helvetica, sans-serif;
    }
    #logo{
      margin-left:10px;
    }
    #senden{
      margin-left:7em;
    }
    /* --- Fonts & Formatting END ---*/

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    There are slight differences in how a browser renders fonts and also between operating systems. I have an article, somewhere, about this and I'll try to find it but there is little you can do other than limiting your font choice which you may not want to do.

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Fonts are rendered by the OS, and will vary greatly depending on, on Windows, whether you have ClearType on or not, on Linux what font settings you've chosen and I don't know whether OS X is flexible or not but the point is there. The only real difference is IE7. This is because certain versions of IE have trouble using ems straight off. In order to counter the problem, use this simple rule:
    Code:
    
    html {
      font-size: 100%;
    }

  • #6
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much for your help. I have a feeling this might turn out good.

    On the other hand: I've now replaced all "em" sizes within CSS by "px".



    Although fonts now seem almost equal size, the spacing is still far off. Also, the content "Inhalt" is not even close.

    The orange arrow points out that about 1px of the GFX is cut off by IE. (..I really hate that browser by now.)

    Both above browser screenshots are rendered on Vista64 - so I don't think OS are the cause here. (Although I'm quite sure once it works here, it'll be off on other OS)

    I've also changed the fonts chosen to:
    Code:
    "font-family:Tahoma, Geneva, sans-serif;"
    Hoping it should turnj out fine on Win & Mac.

    I dont know what to try next. If access to the testspace is of any help, I'll gladly pass on lg/pwd by pm.



    Not given up hope quite yet....

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Verdana is more cross-platform, but okay. How about adjusting the leading (line-height) or padding/margin between list items?

  • #8
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm, I'm not sure I understand what I should change.

    I've set all padding and margins of list items from "em" to "px". I expected to see both browsers render the menu identical. To my surprise this is not the case.

    Could you please give me more details?

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Please provide a link (: I can't think of anything but the leading being weird.

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,475
    Thanks
    6
    Thanked 980 Times in 953 Posts
    OK, the font size is the same but the vertical spacing is off in IE and I may be able to tell you why. I assume these are lists with links, right? Then you’re experiencing the “list whitespace bug” where list items get unwanted space between them in IE 6 and 7 (less than in version 6 but still visible).

    The solution to this is to give your list items layout by either floating them (and clearing these floats at the same time) or assigning a with and/or height.


  •  

    Posting Permissions

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