Top of forum page renders wrong for users without Trebuchet

Pocket

Pocket

Half a Lambert is better than one.
aa
Nov 14, 2009
4,696
2,580
Happened to notice this when I visited the site in Linux:

tf2maps.png


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.
 
tyler

tyler

aa
Sep 11, 2013
5,102
4,621
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.
 
Pocket

Pocket

Half a Lambert is better than one.
aa
Nov 14, 2009
4,696
2,580
So is Trebuchet. On both Windows and Mac. Since at least Windows XP, before Calibri even existed.
 
Pocket

Pocket

Half a Lambert is better than one.
aa
Nov 14, 2009
4,696
2,580
Well, huh. It still doesn't fit. I don't know why; it worked fine when I hacked it in using Firebug.
 
fubarFX

fubarFX

The "raw" in "nodraw"
aa
Jun 1, 2009
1,720
1,978
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
 
Last edited:
Pocket

Pocket

Half a Lambert is better than one.
aa
Nov 14, 2009
4,696
2,580
Wait, what effect does this have? The issue wasn't a CSS bug; it was the fallback font being too wide...
 
nightwatch

nightwatch

aa
Sep 7, 2012
638
500
stevethepocket said:
Wait, what effect does this have? The issue wasn't a CSS bug; it was the fallback font being too wide...
Click to expand...
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:
You must log in or register to reply here.
Top Bottom