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
Even online linkje, kunnen we wat meer mee.
Klikje

Afbeeldingen staan wel niet online, ik acht dat ook niet nodig.
font-weight: bold;
PHP Scripter op 05/08/2011 17:33:22

font-weight: bold;



Uuh nee? Dat staat nergens in de CSS... Heb jij wel gelezen, ik weel geen bold?

[size=xsmall]Toevoeging op 05/08/2011 17:36:45:[/size]

Write Down op 05/08/2011 17:36:13

[quote="PHP Scripter op 05/08/2011 17:33:22"]
font-weight: bold;



Uuh nee? Dat staat nergens in de CSS... Heb jij wel gelezen, ik wil geen bold?
[/quote]

Verander regel 145 in jouw code hierboven eens in:

font-size: 14px;

Is het bold nu verdwenen?

Sommige lettertypes [color="red"]lijken[/color] bold als ze groter zijn dan een bepaald aantal pixels.

Dan is het nog steeds bold, overigens gaat het vooral om p.content, die mag absoluut niet bold zijn, om die reden staat deze ook in punten uitgedrukt.
Waarom niet in pixels????

font-size: 10p[color="red"]x[/color];
Omdat in dit geval 10pt een mooi resultaat zou moeten geven. 10px is overigens kleiner dan 10pt.

Ik heb ook even het geprobeerd met 10px, maar ook dan blijft het nog bold.

[size=xsmall]Toevoeging op 05/08/2011 18:36:57:[/size]


Ik zie dat de bodytag geen opmaak voor de tekst heeft, het beste is om hier de standaard opmaak in op te maken. Hier kan misschien het probleem liggen (bij mij in Chrome is die trouwens niet dik gebruikt)

Ook zou je kunnen proberen om .content een font-weight: normal; mee te geven.
Beste Oetzie,

In chrome is het inderdaad correct, in de andere genoemde browsers niet. font-weight heb ik al even geprobeerd, maar ook dat baat niet. Heven ook even in de body wat zaken gezet, maar ook dat helpt niet.

Reageren