asked on

Constant bold text in Internet Explorer

Web pages display nicely on Mozilla FF, Safari, Chrome, but on IE9 all the text is bold, despite CSS rules stating otherwise.

Is anyone aware of a fix for this bug?

Dave Baldwin

Show us the page.

dmeeren

Set zoom factor to 100% ?? Maybe? We need more info

Nrisimha

Hello,

First check if your first line in a HTML page is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

and the second line is:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Also add a next metadata for correct displaying of fonts:

<meta content="IE=8" http-equiv="X-UA-Compatible" />

If this doesn't work then put in metadata this line:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

And if these two metadatas will not work then try this that helped me many times for IE 9:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

good luck

Nrisimha

TonyCabone

ASKER

Already use <meta http-equiv="X-UA-Compatible" content="IE=edge" />.

The opening lines are also there.

TonyCabone

ASKER

And sorry no the site isn't live yet so I cannot show you.

TonyCabone

ASKER

Actually I can give you another example: http://118.127.32.94/~wwwassas/

Atique Ansari

The font looks same in both IE and Firefox.

TonyCabone

ASKER

IE9?

Nrisimha

The fonts are really the same in IE and Firefox.

If you think of that fonts are looking "bold" in IE it is not bold text. It is a way how Internet Explorer renders the fonts. And it is true that IE display a little, but just a little "thicker" fonts.

Just try to compare real regular font and bold font in IE and Firefox and you will see that IE accepts command for bolding a text:

Internet Explorer

Firefox

Nrisimha

TonyCabone

ASKER

So strange, all font including the navigation is heavy bold on my computer's IE9!

Atique Ansari

I think you should create a separate style-sheet for IE 9 only and decrease the font size, so output will be same on all browsers.

Atique Ansari

Even better solution.

Example 1:

#element {
color:black;
}
#element {
*color: blue; /* IE6+7, doesn't work in IE8/9 as IE7 */
}
#element {
_color: red; /* IE6 */
}
#element {
color: green \0/; /* IE8+9 */
}
@media all and (min-width:0) {
#element { color:pink \0/; } /* IE9 */
}

Example 2:
#element {
font-size: 12px;
*font-size: 12px; /* IE6+7, doesn't work in IE8/9 as IE7 */
_font-size: 12px; /* IE6 */
font-size: 12px \0/; /* IE8+9 */
}

For more information, please find below URLs

#element {
font-size: 12px;
*font-size: 12px; /* IE6+7, doesn't work in IE8/9 as IE7 */
_font-size: 12px; /* IE6 */
font-size: 12px \0/; /* IE8+9 */
}

For more information, please go to below URLs.

http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx

http://www.google.co.in/#hl=en&cp=7&gs_id=z&xhr=t&q=ie9+css+hack&pf=p&sclient=psy-ab&source=hp&oq=ie9+css&aq=0&aqi=g4&aql=&gs_sm=&gs_upl=&pbx=1&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=4d5d8d974ef6dcd8&biw=1366&bih=586

Atique Ansari

Search all "font-size:.." in and add one " font-size: 12px \0/; /* IE8+9 */ "

Nrisimha

Did you use the metadata code I sent to you:

<meta content="IE=8" http-equiv="X-UA-Compatible" />

It sometimes helps when you can see the web pages and incorrect fonts under the Internet Explorer 9,
because it takes rendering of IE 8.

Just try to put this and remove your:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

I hope it will help for you as it helped to millions users of IE 9, some of them are members of this EE Forum !

Nrisimha

TonyCabone

ASKER

Could you be more specific on 'IE9 specific code'?

Atique Ansari

Are you asking me or to Nrisimha?

Nrisimha

It is a question of rendering fonts, CSS styles, tables, DIV tag, SPAN tag etc. in Internet Explorer 9.

So, web designer have a problems with all these codes when try to see their web pages in IE 9, because they get WRONG display of web page in IE 9, although the same web pages are NORMALLY displayed in IE 8 for example.

There were lots of questions about all these problems of displaying a right code in IE 9.

So, one of the solution was to put only this metadata code between <HEAD> and </HEAD> tags:

<meta content="IE=8" http-equiv="X-UA-Compatible" />

But don't put ANY additional metadata tag that is rellated to IE in this header !!!

Example code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
[b]<meta content="IE=8" http-equiv="X-UA-Compatible" />[/b]
<title>my web site</title>
<style type="text/css">
body
{
        width: 100%;
}
#left
{
    float: left;
    margin: 0px 3px;
    border: #FF00CC solid 1px;
}
#right
{
    float: left;
    width: 60%;
    margin: 0px 3px;
    border: #00CCFF solid 1px;
    text-align: center;
}
</style>
</head>

Open in new window

Nrisimha

TonyCabone

ASKER

I have tried all of these solutions & nothing works.

Do you think it could be something to do with my actual browser, as some of you have said the page seems to be displaying correctly?

Dave Baldwin

On my computer, your linked page above looks equally bad in IE8 and Firefox because I don't have that 'Coda' font you're trying to use. Deleting it in Firebug cleans up the page right away.

TonyCabone

ASKER

OK I must be mistaken I thought Google Fonts automatically loaded. Dave are you suggesting stick to the default system fonts at all times to avoid this?

ASKER CERTIFIED SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial