Top of forum page renders wrong for users without Trebuchet

Discussion in 'Site Discussion' started by Pocket, Feb 20, 2013.

  1. Pocket

    aa Pocket func_croc

    Messages:
    4,489
    Positive Ratings:
    2,377
    Happened to notice this when I visited the site in Linux:

    [​IMG]

    The issue is with the font; Trebuchet is narrower than a lot of other sans-serif fonts, including all of the ones listed as fallbacks in the CSS (who exactly did you think would have Calibri but not Trebuchet?) and the one Linux uses as the sans-serif default. I'm not sure what you could do to ensure that the text always fits, given that much variation. I did notice that Droid Sans has roughly the same proportions; maybe you could set it up to use that as the standard fallback, embedded using @font-face.
     
  2. Fr0Z3nR

    aa Fr0Z3nR Creator of blackholes & memes. Destroyer of forums

    Messages:
    6,391
    Positive Ratings:
    5,463
    Send a link of this to drp, he can probably help you out a bit more directly. Nine was the one who did the forum rework, and he's not really doing much work fixing it atm.
     
  3. tyler

    aa tyler snail prince, master of a ruined tower

    Messages:
    5,035
    Positive Ratings:
    4,497
    Added Droid Sans as a fallback for you while I checked in on the site. I don't have Linux installed but when I made it the main font it appeared to render fine, more or less.
     
  4. A Boojum Snark

    aa A Boojum Snark Toraipoddodezain Mazahabado

    Messages:
    4,769
    Positive Ratings:
    5,536
    Isn't Calibri a default font?
     
  5. Pocket

    aa Pocket func_croc

    Messages:
    4,489
    Positive Ratings:
    2,377
    So is Trebuchet. On both Windows and Mac. Since at least Windows XP, before Calibri even existed.
     
  6. Pocket

    aa Pocket func_croc

    Messages:
    4,489
    Positive Ratings:
    2,377
    Well, huh. It still doesn't fit. I don't know why; it worked fine when I hacked it in using Firebug.
     
  7. fubarFX

    aa fubarFX The "raw" in "nodraw"

    Messages:
    1,633
    Positive Ratings:
    1,808
    mega bump, this is still an issue. If I may propose a css fix...

    Code:
    .tf2maps_navlink {
    [COLOR="Red"]float: left;[/COLOR]
    [COLOR="Red"]display: inline; [/COLOR]
    color: #f5f5e7;
    font-size: 11px;
    text-align: center;
    [COLOR="Red"]padding: 8px 6px;[/COLOR]
    white-space: nowrap;
    }
    
    becomes
    
    .tf2maps_navlink {
    [COLOR="Lime"]display: inline-block;[/COLOR]
    color: #f5f5e7;
    font-size: 11px;
    text-align: center;
    [COLOR="Lime"]padding: 8px 3px;   [/COLOR]
    white-space: nowrap;
    [COLOR="Lime"]vertical-align: top;[/COLOR]
    }
    Code:
    .tf2maps_navlink_separator {
    [COLOR="Red"]float: left;[/COLOR]
    display: inline;
    }
    
    becomes
    
    .tf2maps_navlink_separator {
    display: inline;
    }
    
    Code:
    #nav_back {
    height: 32px;
    margin: 0;
    [COLOR="Red"]padding: 0 0 0 385px;[/COLOR]
    background-color: #141313;
    }
    
    becomes
    
    #nav_back {
    height: 32px;
    margin: 0;
    background-color: #141313;
    [COLOR="Lime"]text-align: right;[/COLOR]
    }
    these modifications should have no side effects whatsoever


    and for the record, using "float: left" on things that align to the right is bonkers
     
    • Thanks Thanks x 1
    Last edited: Apr 10, 2015
  8. Geit

    aa Geit 💜 I probably broke it 💜

    Messages:
    597
    Positive Ratings:
    1,116
    All patched, thanks.
     
  9. Pocket

    aa Pocket func_croc

    Messages:
    4,489
    Positive Ratings:
    2,377
    Wait, what effect does this have? The issue wasn't a CSS bug; it was the fallback font being too wide...
     
  10. nightwatch

    aa nightwatch

    Messages:
    640
    Positive Ratings:
    485
    CSS controls all visual aspects of the site... the original code was hard coded to give a certain look for a specific font and browser window, in a bit of a silly method. When the main font doesn't display, the fallback being a different width caused errors because the padding pushed it too far. It looks good for me as it is right now (I'm on linux atm).

    EDIT:

    There is another problem with your original image as well, the login panel and the ad should be side by side, but because of quick-link being shunted onto the following line, it pushed the login panel to the center of the following line and pushed the ad beneath that, which looks kind of silly.
     
    Last edited: Apr 10, 2015