Top of forum page renders wrong for users without Trebuchet

[Pocket]

Happened to notice this when I visited the site in Linux:

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.

 

[Fruity Snacks]

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.

 

[tyler]

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.

 

[A Boojum Snark]

(who exactly did you think would have Calibri but not Trebuchet?)

Isn't Calibri a default font?

 

[Pocket]

So is Trebuchet. On both Windows and Mac. Since at least Windows XP, before Calibri even existed.

 

[Pocket]

Well, huh. It still doesn't fit. I don't know why; it worked fine when I hacked it in using Firebug.

 

[fubarFX]

mega bump, this is still an issue. If I may propose a css fix...

.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]
}

.tf2maps_navlink_separator {
[COLOR="Red"]float: left;[/COLOR]
display: inline;
}

becomes

.tf2maps_navlink_separator {
display: inline;
}

#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

 

[Geit]

All patched, thanks.

 

[Pocket]

Wait, what effect does this have? The issue wasn't a CSS bug; it was the fallback font being too wide...

 

[nightwatch]

Wait, what effect does this have? The issue wasn't a CSS bug; it was the fallback font being too wide...

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.