CSS font problem -.-

[Anton]

hey!
i am getting a problem with Fonts.. In Opera and Firefox everything is okay.. but in some versions of IE font is for some reason bolder…

Thanks!

Code:

body {
text-align: center;
font-family: “Verdana”;
font-size: 16px;
color: #000;
}

.clear {
clear:both;
}

div#wrapper {
text-align: left;
width: 913px;
height: auto;
margin: 0 auto;
background: #f3ede8 url(‘../images/layout/background.jpg’) top left repeat;
}

/* Header with Navigation */
div#header {
width: 913px;
height: 220px;
}
body#index div#header {background: #5e6985 url(‘../images/layout/header.jpg’) top left no-repeat;}

div#mainNav {
height: 27px;
width: 100%;
position: relative;
top: 193px;
}
div#mainNav ul {
display: inline;
list-style: none;
}
div#mainNav ul li {
float: left;
padding: 0 20px 0 20px;
}
div#mainNav ul li a {
font-family: “Times New Roman”;
font-size: 21px;
font-style: italic;
}
body#index div#header div#mainNav ul li a {color: #fff;}

div#welcome{
padding: 20px 0 45px 0;
}

div#message{
text-align: center;
}

div#footer {
float: left;
}

[Spunkmeyer]

You have two specified fonts in your code. Verdana and Times New Roman. The quotes you have put around Verdana don’t actually have to be there. Alternatively, you would use something like " # { font-family:Verdana, Arial, Helvetica, sans-serif;}"

If you have spaces such as in Times New Roman, you need to add the quotes around it, such as: #{font-family: "Times New Roman", Times, serif;}

This in itself wouldn’t cause a problem I don’t think, but you should apply these points anyways. Also, when you declare a font family, you should list the back-up fonts (like the examples above) that the browser will use if they can’t find Verdana etc.

Your bold situation is difficult to fix without seeing it and letting us know what version of IE is causing the problem. Sometimes (Safari for example) a browser can have it’s own font-smoothing that will affect how things look. IE 7 for example uses Microsoft’s "Cleartype" font smoothing. You can disable Cleartype by going to Tools > Internet Options > Advanced (tab) > (scroll to) Multimedia > uncheck ‘Always use ClearType for HTML’ in IE7.

Old versions of IE however don’t have this as far as I can see. So… the next step is to post the url, the ie version and any other troubleshooting info you can pass along.

[Anton]

thanks!

well here how it looks like in 3 browsers

Opera (same in Firefox btw) :
http://img262.imageshack.us/my.php?image=operaqc7.jpg

IE6 (Menu bit bolder here):
http://img239.imageshack.us/my.php?image=ie6tx7.jpg

IE7:
http://img239.imageshack.us/my.php?image=ie7kv9.jpg

[Spunkmeyer]

It looks like an issue with IE6 – IE7 and FF/Opera look the same to me. Could you forward me an url to take a look at? It’s hard to tell from the image.

[Anton]

http://test.group41434.tu2.ru/

[cssgirl]

IE6 often bolds a font when it’s over 16/18px I have seen from random tests I have done when declaring font sizes for h1s etc. I think it just has something to do with the way that IE6 renders fonts at larger sizes. Try taking the font size down a bit and seeing if it helps.

[Anton]

ye it does help, thou i need 18px text o.O or so

[cssgirl]

I don’t this this will work, but did you try to make sure that font-weight is set to normal? Otherwise, what about trying a similar font family they may hold up better in IE? :/

[Author]

Posts