Hallo iedereen, ik heb een probleem met het positioneren van mijn div's.
Ben wat aan het experimenteren met verschillende site opbouwen en indien ik een border wil toevoegen loopt het mis..
Ofwel is het in IE goed, ofwel in Firefox, maar nooit in beide.
De css file:
Code:
body{
color:#79430A;
font-family: Tahoma, Arial, Verdana, Helvetica;
font-size: 11px;
text-align:center;
background-repeat:no-repeat;
background-position:center;
}
.total{
border:3px #79430A solid;
width:1024px;
height:800px;
margin-left:auto; margin-right:auto;
text-align:left;
}
.top{
background-color:black;
width:1024px;
height:150px;
background-image:url("images/logo.png");
}
.bottom{
background-color:#79430A;
width:1024px;
height:20px;
}
.middle{
background-color:green;
width:1024px;
height:630px;
position:relative;
}
.menu{
width:200px;
height:630px;
background-color:#C0C0C0;
border-right: 4px #79430A solid;
position:absolute;
}
.content{
width:824px;
height:630px;
background-color:#EEEEEE;
position:absolute;
left:200px;
}
a:link{color:#79430A;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}
a:visited{color:#79430A;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}
a:hover{color:#02519F;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}
a:active{color:#79430A;font-family:Verdana;font-weight:bold;font-size:12px;text-decoration:none;}
de html pagina:
Code:
<html>
<head>
<link rel="StyleSheet" href="stijl.css" type="text/css" title="layout">
<meta name="description" content="beschrijving van uw site" />
<meta name="keywords" content="inhoud van uw site" />
<meta name="author" content="dotred" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div class="total">
<div class="top">
<!-- hoofding -->
</div>
<div class="middle">
<div class="menu">
<a href="index.html">HOME</a><br>
<a href="assortiment.html">assortiment</a><br>
<a href="contact.html">contact</a><br><br>
<a href="promo.html">PROMO</a>
</div>
<div class="content">
Welkom op onze site.
<br>
<br>
<img src="http://www.9lives.be/forum/images/shop.png">
</div>
</div>
<div class="bottom">
.Red
</div>
</div>
</body>
</html>
Er moet dus een border rechts van het menu staan, in IE ziet het er goed uit zoals de code hier staat, in firefox zie je de border niet..
Als ik dan het aantal pixels van de border bijvoorbeeld bij de menubreedte aftel dan klopt het in IE niet meer.
Hoe los ik dit op?
Alvast bedankt!