...

View Full Version : Font rendering IE / FF / Safari



monokoi
06-24-2009, 01:34 PM
Hello, hopefully someone can help me on this matter!

Although my CSS / XHtml is fully validated - all three browsers choose to render fonts in a different manner.

http://img41.imageshack.us/i/schriften.gif
http://img41.imageshack.us/img41/6055/schriften.gif (http://img41.imageshack.us/i/schriften.gif/)


I can't figure out how to have all fonts rendered like Firefox does. :mad:

Here's the CSS excerpt:



#navigation li a:link, #navigation li a:visited {
font-size:1.14em;
display: block;
padding: 0.4em 0 0.4em 1.3em;
border-left: 0px /*solid #ffffff;*/;
border-right: 0px /*solid #ffffff*/;
background: #d7d8d8 url(../images/menu_background.png) center top;
/*background-color: #ffffff;*/
color: #000000;
text-decoration: none;
}

I hope this information is sufficient to solve the problem, if not I will glady provide any needed code.

This one has really got me stumped - can someone please help out? :thumbsup:

VIPStephan
06-24-2009, 01:49 PM
You are currently using a relative unit to set the font size. And as all relative units em is relative to the font size of the parent element(s). Every user can set a different default font size in their browser to which these sizes may relate so it’s advisable to use an absolute unit as base font size and make the relative units relative to this.

Then as another problem I can see from your code snippet: Different browsers have a different interpretation of decimals. I. e. Firefox may make a size increase from 1.1em to 1.12em while IE only makes a difference from 1em to 1.15em, and the decimals in between are ignored. You better keep it to 0.05 steps at least.

It would help if you sowed us your entire code to make more accurate assumptions.

monokoi
06-24-2009, 02:09 PM
Thank you for your response. I thought preseting a snippet is easier to handle, rather than posting the entire code - having you sort out what's important and what isn't.


CSS:

*{
margin: 0;
padding: 0;
}
html{
height: 100%;
overflow:scroll;
}
body{
height: 100%;
text-align: center;
background-color:#d8d8d8;
}
.clear{
clear:both;
}
* html #container_nonFooter{
height: 100%;
}
#container_nonFooter{
position: relative;
width:960px;
min-height: 100%;
text-align:left;
background: #d7d8d8 url(../images/internet_design_bg.jpg) repeat-y center top;
/*background-color: #f0ff00;*/
}
#container_wrapper{
padding-bottom: 9em;
background: #d7d8d8 url(../images/internet_design_bg.jpg) repeat-y center top;
/*background-color: #00ff00;*/
}
#container_foot{
position: relative;
height: 83px;
margin-top: -83px;
text-align:left;
}
#container_center{
height:100%;
width:960px;
min-height:100%;
margin: 0 auto;
}
#navigation {
width:202px;
margin-left:116px;
margin-right:18px;
margin-top:17px;
float:left;
background: #d7d8d8 url(../images/menu_background.png) repeat-y center top;
/*background-color:#d700ff;*/
}
#content {
width:445px;
float:left;
padding:18px 12px 12px 12px;
/*background-color:#10f2f2;*/
}
#footer{
width:960px;
height:83px;
margin-left:0px;
text-align:center;
background: #d7d8d8 url(../images/web_design_ft.jpg) center top;
/*background-color:#ffffff;*/
}





/* --- Naviagation START ---*/
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 0px /*solid #ffffff*/;
border-top: 0px /*solid #ffffff*/;
}
#navigation li a:link, #navigation li a:visited {
font-size:1.14em;
display: block;
padding: 0.4em 0 0.4em 1.3em;
border-left: 0px /*solid #ffffff;*/;
border-right: 0px /*solid #ffffff*/;
background: #d7d8d8 url(../images/menu_background.png) center top;
/*background-color: #ffffff;*/
color: #000000;
text-decoration: none;
}
#navigation li a:hover {
font-size: 1.14em;
background: #d7d8d8 url(../images/menu_active.png) center top;
/*background-color: #ffcc33;*/
border-left: 0px;
color: #333333;
}
.menugfx {
display: block;
}
/* --- Naviagation END ---*/



/* --- Fonts & Formatting START ---*/
img {
border-style: none;
}
p{
padding-bottom:1em;
font-size:0.8em;
font-family:Verdana, Helvetica, sans-serif;
}
p.note{
font-size:0.6em;
font-family:Verdana, Helvetica, sans-serif;
}
p.backlink{
text-align:center;
font-size:0.6em;
margin-top:0.6em;
}
img.contentimage{
margin-bottom:30px;
}
h1{
font-size:1.14em;
font-family:Verdana, Helvetica, sans-serif;
padding-bottom:0.6em;
}
h2{
font-size:0.8em;
font-family:Verdana, Helvetica, sans-serif;
padding-bottom:0.5em;
}
ul{
font-size:0.8em;
padding-left:16px;
font-family:Verdana, Helvetica, sans-serif;
}
#logo{
margin-left:10px;
}
#senden{
margin-left:7em;
}
/* --- Fonts & Formatting END ---*/

drhowarddrfine
06-24-2009, 05:31 PM
There are slight differences in how a browser renders fonts and also between operating systems. I have an article, somewhere, about this and I'll try to find it but there is little you can do other than limiting your font choice which you may not want to do.

Apostropartheid
06-24-2009, 06:21 PM
Fonts are rendered by the OS, and will vary greatly depending on, on Windows, whether you have ClearType on or not, on Linux what font settings you've chosen and I don't know whether OS X is flexible or not but the point is there. The only real difference is IE7. This is because certain versions of IE have trouble using ems straight off. In order to counter the problem, use this simple rule:


html {
font-size: 100%;
}

monokoi
06-24-2009, 07:15 PM
Thank you so much for your help. I have a feeling this might turn out good.

On the other hand: I've now replaced all "em" sizes within CSS by "px".

http://img151.imageshack.us/img151/1084/fonts2.th.gif (http://img151.imageshack.us/i/fonts2.gif/)

Although fonts now seem almost equal size, the spacing is still far off. Also, the content "Inhalt" is not even close.

The orange arrow points out that about 1px of the GFX is cut off by IE. (..I really hate that browser by now.)

Both above browser screenshots are rendered on Vista64 - so I don't think OS are the cause here. (Although I'm quite sure once it works here, it'll be off on other OS)

I've also changed the fonts chosen to:

"font-family:Tahoma, Geneva, sans-serif;"
Hoping it should turnj out fine on Win & Mac.

I dont know what to try next. If access to the testspace is of any help, I'll gladly pass on lg/pwd by pm.



Not given up hope quite yet.... :rolleyes:

Apostropartheid
06-24-2009, 08:22 PM
Verdana is more cross-platform, but okay. How about adjusting the leading (line-height) or padding/margin between list items?

monokoi
06-24-2009, 08:48 PM
Hmmm, I'm not sure I understand what I should change.

I've set all padding and margins of list items from "em" to "px". I expected to see both browsers render the menu identical. To my surprise this is not the case.

Could you please give me more details?

Apostropartheid
06-24-2009, 08:51 PM
Please provide a link (: I can't think of anything but the leading being weird.

VIPStephan
06-25-2009, 10:57 AM
OK, the font size is the same but the vertical spacing is off in IE and I may be able to tell you why. I assume these are lists with links, right? Then you’re experiencing the “list whitespace bug (http://gtwebdev.com/workshop/gaps/white-space-bug.php)” where list items get unwanted space between them in IE 6 and 7 (less than in version 6 but still visible).

The solution to this is to give your list items layout (http://satzansatz.de/cssd/onhavinglayout.html) by either floating them (and clearing these floats at the same time) or assigning a with and/or height.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum