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?
TonyCaboneAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
Show us the page.
dmeerenCommented:
Set zoom factor to 100% ?? Maybe? We need more info
NrisimhaCommented:

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






Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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

The opening lines are also there.
TonyCaboneAuthor Commented:
And sorry no the site isn't live yet so I cannot show you.
TonyCaboneAuthor Commented:
Actually I can give you another example: http://118.127.32.94/~wwwassas/
Atique AnsariCommented:
The font looks same in both IE and Firefox.
TonyCaboneAuthor Commented:
IE9?
NrisimhaCommented:

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

IE
Firefox

Firefox

Nrisimha
TonyCaboneAuthor Commented:
So strange, all font including the navigation is heavy bold on my computer's IE9!
Atique AnsariCommented:
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.

<!--[if IE 9]>
IE9-specific code goes here
<![endif]-->
Atique AnsariCommented:
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 AnsariCommented:
Search all "font-size:.." in and add one " font-size: 12px \0/; /* IE8+9  */ "
NrisimhaCommented:


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

TonyCaboneAuthor Commented:
Could you be more specific on 'IE9 specific code'?
Atique AnsariCommented:
Are you asking me or to Nrisimha?
NrisimhaCommented:


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
TonyCaboneAuthor Commented:
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 BaldwinFixer of ProblemsCommented:
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.
TonyCaboneAuthor Commented:
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?
Dave BaldwinFixer of ProblemsCommented:
Here http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml is a list of the most common fonts on all platforms.  Coda is not on that list.  Your other option is to use the fonts in a JPG or PNG that doesn't depend on the installed font on the viewer's computer.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.