Hi all, okay so I'm having a really annoying issue, hopefully someone here can shed some light on it:


Load up test.html ... it uses @font-family to load the old DOS/console font. I want to use this font in the redesign of my website (DOSGames.com...) for the menus and stuff. It should look fine when you first load the page (ie, not anti-aliased & blurry). However, in Firefox and IE, it only looks un-anti-aliased when the content doesn't go beyond the window size; ie, when there is no scroll bar. Try it out, load the page, then make the window smaller (in IE & FF) and as soon as the vertical scrollbar appears, the text goes blurry! This does not happen in Chrome.

After a LOT of testing (the actual page I'm working with is a lot more complex than the test.html file) I found that if I remove "margin:0 auto;" from the div the problem disappears, this is exactly the same page except without "margin:0 auto;":


So, does anyone have a suggestion to fix this? Should I use a different method to change the fonts? I don't want to just use images, since there will be a lot of text (I want the whole sidebar to be in this particular font) ... is this just a browser bug?! It's so obscure and annoying ...

(The actual new site design uses margin:0 auto to center the two-column layout on the page.)