Beste mensen,

Ik heb nogal een aardig probleem. Ik ben momenteel een design aan het slicen en ging is een kijkje nemen in wat verschillende browsers. In chrome zag ik mooi wat ik wou, maar tot mijn verbazing zie ik in Internet Explorer en FireFox dat het font veel dikker is dan in chrome. Ik heb geen idee waar de fout juist zit.

Ik vermoed dat jullie genoeg hebben aan de CSS code. Ik geef ze helemaal, aangezien ik niet weet waar de fout zit.


            html, body {
                height: 100%;
                padding: 0;
                margin: 0;
                background-image: url(c/bg.png);
                background-repeat: repeat-x;
                background-color: #6496B4;
            }
            body {
               /* background: o repeat-y top right; */
               text-align: center;
            }
            /* IE7 Fix */
            * html #container {
                display: table;
                height: 100%
            }
            /* Opera Fix */
            body:before {
                content: "";
                height: 100%;
                float: left;
                width: 0;
                margin-top: -32767px;
            }
            #container {
                height: 100%;
                height: auto !important;
                min-height: 100%;
                width: 734px;
                margin: 0 auto;
                text-align: left;
                background-image: url(c/content_bg.jpg);
                background-repeat: repeat-y;
            }
            #main {
                overflow: auto;
                padding-bottom: 100px;
            }
            
            /* Header */
            #header {
                width: 734px;
                height: 163px;
                background-image: url(c/bg.png);
                background-repeat: repeat-x;
            }
            #boat_top {
                background-image: url(c/boat_top.jpg);
                background-repeat: no-repeat;
                width: 112px;
                height: 118px;
                margin-top: 21px;
                float: left;
            }
            #boat_bottom {
                background-image: url(c/boat_bottom.jpg);
                background-repeat: no-repeat;
                width: 112px;
                height: 24px;
                float: left;
            }
            #logo {
                background-image: url(c/logo.jpg);
                background-repeat: no-repeat;
                width: 176px;
                height: 68px;
                margin-top: 71px;
                margin-right: 446px;
                float: right;
            }
            #top {
                background-image: url(c/header_top.jpg);
                background-repeat: no-repeat;
                width: 604px;
                height: 24px;
                margin-right: 18px;
                float: right;
            }
            
				
            #body {
                overflow: hidden;
                height: 100%;
            }
            #container_left {
                width: 549px;
            }
            #right-sidebar {
                width: 167px;
                float: right;
                margin-left: -100px;
            }
            #footer {
                background-color: #71A4C2;
                position: relative;
                height: 34px;
                margin-top: -35px;
                clear: both;
            }
            #footer p {
                margin: 0;
                padding: 0;
            }
            
            
            
            #menu {
                background-image: url(c/menu.jpg);
                background-repeat: repeat-x;
                height: 35px;
            }
            #menu ul {
                margin:0;
                padding: 5px 0 0 38px;
            }
            #menu ul li{
            	display:inline;
            	margin:0 4px;
            }
            #menu ul li a{
            	font-family: Tahoma,Calibri,Verdana,Geneva,sans-serif;
              font-size: 16px;
              color: #FFF;
              text-decoration: none;
              text-shadow: 0 0 1px #fff,0 0 1px #fff 0 0 1px #fff,0 0 1px #fff
              text-transform:capitalize
            }
            #menu ul li a:hover{
                color: #79AAC6;
                text-shadow: 0 0 1px #79aac6,0 0 1px #79aac6 0 0 1px #79aac6,0 0 1px #79aac6
                padding-bottom: 1px; 
                border-bottom: 2px solid #6898B1; 
            }
            #content_top {
                background-image: url(c/content_top.jpg);
                background-repeat: repeat-x;
                height: 91px;
                width: 549px;
                margin-left: 25px;
            }
            #content_top h1,
            #right-sidebar h1 {
                font-family: Tahoma,Calibri,Verdana,Geneva,sans-serif;
                font-size: 20px;
                color: #FFF;
                font-weight: normal;
                text-shadow: 0 0 100px #fff 0 0 100px #fff
                margin: 0;
                padding: 29px 0 0 16px;
            }
            #right-sidebar h1 {
                padding:0;
                color: #97B7C7;
                text-transform:uppercase;
                font-style: italic;
            }
            p.content {
                width: 508px;                
                display: block;
                color: #FFF;
                margin: -24px 0 0 41px;
                font-family: Arial,Tahoma,Calibri,Verdana,Geneva,sans-serif;
                font-size: 10pt;
                text-align: justify;
            }


Bedankt!
Write Down
In mijn FF 5 lijkt het wel goed te gaan (zie plaatje). Kan het zijn dat je ClearType instellingen niet helemaal goed staan?

Bij mij in alle browsers die ik heb (IE 6, 7, 8, FireFox, Safari, Chrome) is het allemaal het zelfde.
Vreemd, ik heb die ClearType wizzard nog is doorlopen, maar ik zie geen verschil.
staat je browser niet toevallig op meer dan 100%?
Nope, staat allemaal juist.

[size=xsmall]Toevoeging op 06/08/2011 13:37:29:[/size]

Ik heb zonet een XP-VM opgestart, en daar ziet het er wel wat beter uit... Vreemd. Ik zal even nog is een Windows 7 VM installeren.
Ik bedacht mij ineens dat ik een tijd geleden ook zoiets had met FF. Ik heb daarvoor in de about:config de optie gfx.direct2d.disabled aangezet en toen was het over.
Het heeft iets met de rendering van het lettertype te maken. Als je daar op zoekt ben je niet de enige. ;)
Top Eric! Dat werkt inderdaad, ik ga eens zoeken of IE een gelijkaardige instelling heeft.

[size=xsmall]Toevoeging op 06/08/2011 14:33:52:[/size]

Tot hier toe nog niets gevonden.

Reageren