Ik heb een probleem: ik wil mijn website opbouwen uit DIVs. Nu heb ik iedere DIV een hoogte en een breedte en een margin meegegeven, zodat ik een mooi opgebouwde website krijg. In firefox heb ik een mooi vormgegeven website, maar als ik naar IE ga staan de DIVs onder elkaar in plaats van naast elkaar. Dit heeft volgens mij met de padding van de DIVs te maken, maar ik krijg het niet opgelost. Hierbij mijn codes:
Pagina:
<body>
<center>
<div style="text-align: center; align: center; width: 800px;">
<div class="top"><img src="images/logo.png"></div>
<div class="oranjevert" style="height: 540px;"> </div>
<div class="paarsvert" style="height: 540px;"> </div>
<BR>
<div style="float: left;">
<div class="menu">Menu 1</div>
<div class="menu">Menu2div>
<div class="menu">Menu3div>
<div class="menu">Menu4<div>
<div class="main"><H1>Van harte welkom</H1>
Van harte welkom op onze website.
</div>
</div>
<div>
<div class="portfolio">Hier het portfolio<div>
<BR>
<div class="contact">Contactgegevens hier</div>
<BR>
<div class="oranjehor"> </div>
<div class="paarshor">Algemene Voorwaarden | Disclaimer </div>
</div>
</div>
</center>
</body>
En dit is een deel van de stylesheet:
div.paarshor {
background: url(images/lichtpaars.png);
height: 15px;
width: 255px;
float: left;
text-align: right;
font-size: x-small;
text-indent: 2px;
margin-bottom: 15px;
color: #ffcc99;
padding: 0px;
border: 0px;
}
div.oranjehor {
background: url(images/lichtoranje.png);
height: 15px;
width: 545px;
float: left;
margin-bottom: 15px;
padding: 0px;
border: 0px;
}
div.menu {
background: url(images/lichtpaars.png);
height: 80px;
width: 130px;
float: left;
text-align: left;
margin-left: 5px;
margin-bottom: 20px;
margin-top: 20px;
padding: 0px;
border: 0px;
}
div.portfolio {
background: url(images/lichtoranje.png);
height:300px;
width: 226px;
float: left;
text-align: left;
text-indent: 5px;
margin-bottom: 20px;
margin-top: 20px;
margin-right: 5px;
padding: 0px;
border: 0px;
}