Very poor fonts in IE8 (probably all IE)

[GoogleCodeExporter]

What steps will reproduce the problem?
1. View your slideshow in IE8. The text is not aliased. It looks horrible.
I think this is issue with cleartype and Ajax.
2.
3.

What is the expected output? What do you see instead?

I'd like nice fonts like in Safari or FF. But in IE it's very bad.

What version of the product are you using? On what operating system?

V 1.0 on Vista with IE8. Server is running on CentOS. 

Please provide any additional information below.

See how bad the font looks on IE 8 in my screen capture.

Original issue reported on code.google.com by sean.spe...@gmail.com on 21 Oct 2009 at 2:40

Attachments:

• gallerificIE8.JPG

[GoogleCodeExporter]

Having the same issue on IE7/Vista.  Fonts in the caption are incredibly jagged.
(c.f. airoom.com/design-to-build-projects/home-additions

Original comment by yout...@blueprintds.com on 29 Oct 2009 at 11:12

[GoogleCodeExporter]

I think it has something to do with Ajax and Cleartype... I searched the net and
found a lot of issues with this... Maybe the developer can figure out how to
enable/disable cleartype.

Original comment by sean.spe...@gmail.com on 30 Oct 2009 at 1:54

[GoogleCodeExporter]

Hi Sean,

Ajax is not issue here - thing is that IE does not render fonts good when you 
have
opacity. You can find solution here:
http://jszen.blogspot.com/2005/04/ie-bold-text-opacity-problem.html

in your case you will need to add background-color in style.css to next 
elements:
div.image-title
div.image-desc

Best regards,
Bata

Original comment by bratisla...@gmail.com on 30 Oct 2009 at 5:51

[GoogleCodeExporter]

Thanks for the suggestion Bata! I will check it out and report my findings!

Sean

Original comment by sean.spe...@gmail.com on 30 Oct 2009 at 7:22

[GoogleCodeExporter]

hi bata,

i already try to add css modification on my page, but still text looks not good.
already to change font type, font size, but still no result.

this is few changes i have made.

div.image-desc {
        filter:alpha(opacity=90);  
        background-color:#fff"; 
    width:550px;
    FONT-SIZE: 13px;
    COLOR: #000000;
    /*font-family: Georgia;*/
    /*font-family: Trebuchet MS, Arial, Verdana, Helvetica, sans-serif;*/
    font-family: Verdana;
}
it's better on crt monitor but not with lcd monitor.

thx,
yossy

Original comment by yossy.re...@gmail.com on 31 Oct 2009 at 1:03

[GoogleCodeExporter]

Hi Yossy,

background-color:#fff"; 
as I see you have " there and that is error ;)
you can also add font-weight:bold
div.image-desc {
        background-color:#fff;  
    width:550px;
    font-size: 13px;
    color: #000000;
    font-family: Verdana;
        font-weight:bold;
}
and you forgot about div.image-title
you need to have there 
background-color:#fff;
font-weight:bold;

Best regards,
Bata

Original comment by bratisla...@gmail.com on 31 Oct 2009 at 12:15

[GoogleCodeExporter]

hi bata,

i was modification my css again, 
yes I forgot the sign ", and already fixed. 
but still there was no difference

here is my css code again.

div.image-desc {
    /*margin-right:75px;
    line-height: 1.3em;
    padding-top: 5px;
    FONT-WEIGHT: bolder;*/ 
  filter:alpha(opacity=90);  
  background-color:#F3F0DB; 
    width:550px;
    FONT-SIZE: 13px;
    COLOR: #000000;
    /*font-family: Georgia;*/
    /*font-family: Trebuchet MS, Arial, Verdana, Helvetica, sans-serif;*/
    font-family: Verdana;
}

i just use div.image-desc. and here is my screen capture.

thx,
yossy

Original comment by yossy.re...@gmail.com on 1 Nov 2009 at 1:43

Attachments:

• testie8ff.png

[GoogleCodeExporter]

Hi Yossy,

I already give you answer in previous post
you should replace your code with this and all should be fine
div.image-desc {
        background-color:#fff;  
    width:550px;
    font-size: 13px;
    color: #000000;
    font-family: Verdana;
        font-weight:bold;
}

P.S. there is no "bolder" in CSS 

Best regards,
Bata

Original comment by bratisla...@gmail.com on 2 Nov 2009 at 3:24

[GoogleCodeExporter]

Very poor fonts in IE6.0, Not at visible IE 6.0 in captions font. Give me proper
solutions.

Original comment by balavelr...@gmail.com on 17 May 2010 at 11:26

Attachments:

• screen.gif

[GoogleCodeExporter]

I added background:#FFF; to div.caption in the CSS and the font looks much 
better.

Original comment by michaels...@gmail.com on 17 May 2010 at 7:37

[GoogleCodeExporter]

Also, for the navigation fonts, input the background color of the div it sits 
upon. 
For my nav, I entered:  background:#e9ebd6; to this element: div.pagination a,
div.pagination span.current, div.pagination span.ellipsis .
Now, the nav fonts look fine in IE.

Original comment by michaels...@gmail.com on 17 May 2010 at 7:42

[GoogleCodeExporter]

Bata, Thanks a million!

Original comment by damithri...@gmail.com on 23 Mar 2011 at 1:10