En anelse skæv!
Det er problem jeg er stødt på før og jeg har egetlig aldrig fået det løst!Primært bruger jeg et baggrundsbillede for at få lavet en menudel og en content del.
Mit problem er at i IE ser det ud som om at #top og #bottom er rykket en pixel eller to mod venstre i forhold til mit baggrundsbillede! Det giver jo lidt 'ubalance' i det hele.
Baggrundsbilledet har en width på 1000px.
Er der noget i CSS'en jeg ikke har forstået? Og hvordan løser jeg dette?
Til sidst ser CSS'en så'n her ud:
html {
margin: 0px 0px 0px 0px;
}
body {
margin: 0px auto 0px auto;
background-color: #DDDDDD;
background-image: url(bg.JPG);
background-position: center;
background-repeat: repeat-y;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
div.crop {
height: 60px;
background-color: #DDDDDD;
clear: both;
}
#top {
height: 80px;
width: 1000px;
margin: 0px auto 0px auto;
background-color: #FFFFFF;
border-bottom: 2px solid #000000;
}
#bottom {
height: 20px;
width: 1000px;
margin: 5px auto 0px auto;
background-color: #FFFFFF;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
clear: both;
}
#main {
width: 1000px;
height: 600px;
margin: 5px auto 0px auto;
}
#menu {
margin: 5px 0px 0px 5px;
float: left;
width: 130px;
}
#content {
margin: 5px 0px 0px 5px;
float: right;
width: 850px;
margin:
}
Og min htmlkode ser således ud:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>webshop system</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="crop"></div>
<div id="top"> <div id="logo">LALALALALALALALALALALA </div></div>
<div id="main">
<div id="menu">
Test
</div>
<div id="content">
Hello! :)<br />Pizzz....<br />Pizzz....<br />Pizzz....<br />Pizzz....<br />Pizzz....<br />
</div>
</div>
<div id="bottom"></div>
<div class="crop"></div>
</body>
</html>
