Hi. I have hit a wall so to speak.

 

I have recently built a website for a customer but there appears to be issues with IE8 and below.

 

http://www.callsthatcount.co.uk

 

I have been using the browsershots website since im using a mac and therefore cannot view the site on IE and the biggest problem is that the fonts look pixelated.

 

I am using Arial Rounded Bold in the header/nav etc which as far as i am aware is a web safe font but i have also imported the font using @font-face and have added the style like so...

 

font-family: MyCustomFont, "Arial Rounded MT", Arial, Helvetica, sans-serif;

 

Is there a better way to do this?

Is this really an issue with my code or is it simply an issue with IE?

My customer keeps mentioning this to me but i can't seem to find a way to fix the problem.

There are also the usual issues with rounded corners etc but the main concern is about the fonts.

 

Your help would be greatly appreciated.

 

Thanks

There is actually one more really annoying issue. In IE8 there is a box that appears on the bottom right of the testimonials. I have attached a screenshot. This is driving me insane and I cannot find it in firebug. Can anyone offer a suggestion?

 

Thanks

http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/

Thanks. i applied this fix but it didnt seem to make a difference. I will look further into it in case i missed something. However, im starting to think that problem is solely to do with the way in which earlier versions of IE render text.

 

Also, ive managed to fix the issue with the box. I removed the following code...

 

/* For IE 8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#d2d2d2')";

/* For IE 5.5 - 7 */

filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#d2d2d2');

 

And that fixed the errors in both IE7 and 8. Don't ask me why!

Arial Rounded is not websafe AFAIK, it is also not a good font for displaying as standard web text, I am using firefox and while your site is readable I wouldn't read a large block of text because the text is hard to the eyes.

 

I would suggest using Arial for the body text and use something like Cufon, Sifr or typeface.js for the headings with Arial Rounded.

not sure if I've missed something in a half-awake blur but in your style.css you have

 

@font-face {
font-family: MyCustomFont;
src: url("../fonts/Arial_Rounded_Bold.eot") /* EOT file for IE */
}
@font-face {
font-family: MyCustomFont;
src: url("../fonts/Arial_Rounded_Bold.ttf") /* TTF file for CSS3 browsers */
}

 

and later use

 

h1, h3, h4, h5, h6 {

  line-height:100%;
   margin:0;
font-family: "Arial Rounded MT", Arial, Helvetica, sans-serif;
}

 

In my limited knowledge of font face shouldn't you be saying ?

 

font-family: MyCustomFont, Arial, Helvetica, sans-serif;

a good read http://sixrevisions.com/css/font-face-guide/

 

and I'm not sure what will happen when as you have in your code you define MyCustomFont twice. At a guess the first may get overridden by the second.