Weird blocky text in IE8? Can you see it?

This site is best viewed in a modern browser with JavaScript enabled.

Weird blocky text in IE8? Can you see it?

BluegillMedia

Hey, I am getting some weird graphical errors in IE8, but I can't tell if it is something to do with the fonts on my machine or the CSS/HTML coding itself (perhaps some connection between my @font-face code and the bolded text).

I was hoping you could have a look at the link below in IE8 and let me know if all the bolded text looks all blocky and pixelated. If you could post back a screen capture that would be even better! Thanks.

This link

The bolded text is the first word in each of the Core Values plus the header/titles.

jedaisoul

IE8 (and below) does not understand CSS3. So there is no point trying to use CSS3 features with IE8. It will not work. There are solutions on the web that claim to make IE8 (and a number of older non-compliant versions of popular browsers) CSS3 compliant, but:

The code is humungous.
It is mostly unnecessary now, as IE7 and IE8 are the only non-compliant browsers in common usage any more.
I've not tested them.

hmsgoddess

You could also make a separate CSS file for ie only. This allows you to design things just for ie for the looks but allow you to keep the look you want/intented in browsers that play nice.

BluegillMedia

Ok, sorry I don't think I was clear enough (and hopefully this doesn't come across as snarky, just trying to get to the point).

Yes I know that CSS3 is ignored by IE8 etc. etc. Yes I have a separate style sheet just for IE8 and below (in fact the stylesheet with the @fontface has been hidden from IE8 and below). If you have a look at the site you can see that within Firefox, the CSS3 font is show, but in IE8 it is just Arial that is showing (which is what I was going for). But that doesn't explain the weird blocky look to the bold text.

My style sheets are put in like this:

<!-- @fontface code -->
<!--[if !lt IE 9]><![IGNORE[--> <link rel="stylesheet" href="css/fonts.css?v=1.0"> <!--<![endif]-->

<!-- IE8 font code (just set to arial and bold) -->
<!--[if lt IE 9]><link rel="stylesheet" href="css/ie8-.css" type="text/css" media="screen" /><![endif]-->

Can you see the blocky text in IE8? Any idea what would cause such a thing?

BluegillMedia

Well it took a bit, but I figured this out. I had some old code in there that made the scrollbar track transparent. The chroma colour must have been too close to some of my font colours and was taking out the anti-aliasing. The code I had was

filter: chroma(color=#001); scrollbar-track-color: #001;

so as it turned out it had nothing to do with my font definitions in CSS or CSS3 - lol. Just thought I would write this back in case someone else ends up with this issue (although I think it would be a rarity that someone else still has invisible scrollbar track code in there).

Thanks for your help though.