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
