Positionering i IE og Mozilla vha. CSS
HejsaVi er ved at lave et projekt i webdesign. Vi vil gerne overholde standarderne, men har nogle problemer med at positionere ting relativt.
Vores positionering vises i IE, men ikke Mozilla. Kan nogen forklare hvorfor?
Her er vores site. http://www.itu.dk/people/rlh/OCD/index5.htm
I IE er billederne rykket 80px mod toppen, men det kan ikke ses i Mozilla.
Desuden er der mellemrum mellem billederne som vi ikke kan få fjernet.
Her er vores html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Velkommen til OCD-foreningen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="index3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="center">
<div class="top">
<img src="img/topleft.jpg">
<div class="cssmenuvandret"> <a href="http://www.tv2.dk" target="_blank">OM
OCD</a> <a href="http://www.tv2.dk">Foreningen</a> <a href="http://www.tv2.dk">Debat</a>
<a href="http://www.tv2.dk">Bliv medlem</a> </div>
</div>
<div class="indholdswrap">
<div class="topwrap">
<div class="fakta">
<div class="venstreboks">Vidste du.... </div>
</div>
<div class="broedtekst">
<div class="indholdsboks">
<div class="spaltepar">
<div class="billede"><img src="img/billede.gif"></div>
<div class="indhold1">Her KLLKÆLKKÆ LKjfhdsfahhgfgHer KLLKÆLKKÆLKj
</div>
</div>
<div class="spaltepar">
<div class="billede"><img src="img/billede.gif"></div>
<div class="indhold1">Her KLLKÆLKK ÆLKjfhdsfahhgfgHer KLLKÆLKKÆLKj
</div>
</div>
<div class="spaltepar">
<div class="billede"><img src="img/billede.gif"></div>
<div class="indhold1">Her KLLKÆLKK ÆLKjfhdsfahhgfgHer KLLKÆLKKÆLKj
</div>
</div>
</div>
<!-- Slut på Indholdsboks -->
</div>
<!-- Slut på Brødtekst -->
</div> <!-- Slut på Topwrap -->
<div class="bundwrap">
<div class="aktivitetsboks">
<div class="aktivitet1">BLAH BLAH</div>
<div class="aktivitet2">BLAH BLAH</div>
<div class="aktivitet3">BLAH BLAH</div>
</div>
</div>
<div class="bundbilledewrap"> </div>
<div class="kontakt">OCD-foreningen Julius Bloms Gade 17, kld. tv. 2200 København
N Tel: 35 82 64 84 post@ocd-foreningen.dk</div>
</div>
</div>
</body>
</html>
Her er vores css:
body {
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding: 0;
margin: 0;
background-color: #CCCCCC;
}
.center {
background: #FFF;
height: 100%;
width: 777px;
text-align: left;
border-left: 1px solid #660000;
margin: 0px auto;
border-right: 1px solid #660000;
padding: 0px;
}
.top {
background: #fff url(img/topright.jpg) no-repeat top right;
width: 777px;
height: 172px;
margin: 0;
padding: 0;
border-right: #FF0000;
border-bottom: #FF0000;
border-left: #FF0000;
}
.cssmenuvandret {
width:270px;
border-left:1px solid black;
vertical-align: top;
float: left;
clear: both;
position: relative;
left: 280px;
top: -172px;
}
.cssmenuvandret a {
float:left;
color:white;
background:#CC0000;
padding:3px 5px;
border:1px solid black;
border-left:0;
text-decoration:none;
text-align:center;
}
.cssmenuvandret a:hover {
background:#FF9900;
color:white;
text-decoration:none;
}
.indholdsboks {
padding: 0;
margin: 0;
position: relative;
float: left;
left: 30px;
top: 10px;
text-align: left !important;
display: inline;
}
.spaltepar {
clear: both;
}
.billede1 {
background-color: #00FF00;
padding: 0px;
float: left;
margin: 0px;
width: 60px;
height: 65px;
text-align: left !important;
}
.indhold1 {
background-color: #FF3300;
padding: 5px;
width: 100px;
float: left;
margin: 0;
text-align: left !important;
position: relative;
top: -65px;
left: 65px;
}
.venstreboks {
background-color: #00FFFF;
width: 100px;
height: 150px;
margin: 0px;
position: relative;
left: 30px;
top: 10px;
text-align: left !important;
padding: 5px;
}
.aktivitetsboks {
padding: 11px;
margin: 0px;
position: relative;
height: 0px;
float: left;
}
.aktivitet1 {
position: relative;
height: 64px;
width: 50px;
left: 250px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FF0000;
}
.aktivitet2 {
position: relative;
height: 64px;
width: 50px;
left: 320px;
top: -64px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FF0000;
}
.aktivitet3 {
position: relative;
height: 64px;
width: 50px;
left: 390px;
top: -128px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FF0000;
}
.indholdswrap {
background: #fff;
width: 777px;
height: auto;
margin: 0;
padding: 0;
}
.topwrap {
background: #fff;
width: 777px;
height: auto;
margin: 0;
padding: 0;
float: left;
border: #33FF99;
}
.bundwrap {
background: #fff;
width: 777px;
height: auto;
margin: 0;
padding: 0;
border: #CC99CC;
}
.fakta {
background: #fff;
width: 30%;
height: auto;
margin: 0;
padding: 5 0;
display: inline;
float: left;
}
.broedtekst {
background: #fff;
width: 68%;
height: auto;
margin: 0;
padding: 5 0;
display: inline;
position: relative;
top: -80px;
}
.bundbilledewrap {
background: url(img/buttomright.jpg) no-repeat bottom right;
width: 777px;
height: 123px;
margin: 0;
padding: 0;
position: absolute;
bottom: 0px;
}
.kontakt {
float: left;
position: absolute;
bottom: 10px;
}
