css vises ukorrekt i IE
Hej,Jeg er i skrivende stund ved at lave følgende site: http://dbian.dk/bremergaarden
Siden er bygger op med css og både stylesheets og html validerer korrekt via w3c. I Firefox vises siden som den skal, men IE rykker desværre rundt på elementerne.. kan ikke finde fejlen :/ Har forsøgt med både strict.dtd samt loose.dtd, uden held.
index.html
==========
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>bremergaarden.dk</title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="KEYWORDS" content="bremergaarden bremergaarden.dk ejerforening">
<meta http-equiv="PRAGMA" content="NO-CACHE">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="outer">
<div id="hdr"><a href="/css/index.html"><img src="hdr5.jpg" width="750" height="70" alt="hdr5.jpg"></a></div>
<div id="bar">═<span style="padding:5px;font-size:11px;">Sidst aendret 24 September 2005</span></div>
<div id="bodyblock">
<div id="l-col">
<br>
<h4>Menu</h4><br>
<div id="menu">
<ul>
<li><a href="#" onfocus="this.blur()">Forside</a></li>
<li><a href="#" onfocus="this.blur()">Om EFB</a></li>
<li><a href="#" onfocus="this.blur()">Kontakt EFB</a></li>
<li><a href="#" onfocus="this.blur()">Bestyrelsen</a></li>
<li><a href="#" onfocus="this.blur()">Administrationen</a></li>
<li><a href="#" onfocus="this.blur()">Dokumenter</a></li>
<li><a href="#" onfocus="this.blur()">Cykel indsamling</a></li>
<li><a href="#" onfocus="this.blur()">Billeder</a></li>
</ul>
</div>
</div>
<div id="cont">
<h4>Velkommen til ejerforeningen Bremergaardens hjemmeside.</h4> <p>Adressen er Bremensgade 7 - 45.
Ejendommen har 215 lejemaal, hvoraf stoerstedelen er ejerlejligheder. Der er ca. 20-30 lejede lejligheder tilbage.</p>
</div>
<div id="ftr">Copyright (c) bremergaarden.dk 2005</div>
</div>
</div>
</body>
</html>
layout.css
==========
#outer {
text-align:left;
border:1px solid #000000;
width:750px;
margin:auto;
}
#hdr {
width:750px;
height:70px;
background:#eeeeee;
color: #333333;
}
#bar {
height:25px;
background:#c0c0c0;
color: #333333;
border:solid #000000;
border-width:1px 0 1px 0;
}
#bodyblock {
position:relative;
background: #dcdcdc;
color: #333333;
width:750px;
padding:0;
}
#l-col {
float:left;
height:100%;
background:#dcdcdc;
color: #333333;
width:124px;
text-align:center;
padding:14px;
}
#cont {
width:536px;
background:#ffffff;
color: #333333;
border:solid #000000;
border-width:0 0 0 1px;
margin: 0 0 0 153px;
padding: 30px;
text-align:left;
min-height:400px;
}
#ftr {
height:25px;
background:#c0c0c0;
color: #333333;
border:solid black;
border-width:1px 0 0 0;
margin:0;
text-align:center;
}
#menu {
position:relative;
text-align:left;
background:#eeeeee;
border:0;
width: 122px;
}
style.css
=========
body {
margin:0;
background:#808080;
color: #333333;
padding: 30px;
font-size: 14px;
text-decoration:none;
font-family:tahoma, verdana;
}
p{
text-indent: 0;
font-size: 14px;
margin:0;
padding:30px;
text-decoration:none;
}
a{
color: black;
text-decoration: none;
}
h3{
text-indent: 0;
font-size: 14px;
margin:0;
padding:15px;
}
h4 {
margin:0;
font-size: 14px;
padding: 1px;
margin: 0 0 0 0;
text-align:center;
text-decoration:none;
}
h5 {
margin: 0;
font-size: 12px;
padding: 30px;
text-decoration:none;
}
img {
border:0;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu li {
margin: 2px 0 0;
}
#menu a {
display: block;
width:120px;
padding: 2px 2px 2px 2px;
border: 1px solid #000000;
background: #eeeeee;
}
#menu a:link, #menu a:active, #menu a:visited {
color: #000000;
}
#menu a:hover {
background: #dcdcdc;
}
/*
div.menu (
position:absolute;
top:0;
left:0;
)*/
Håber at her er en venlig sjæl der kan hjælpe mig med at få løst dette irreterende problem.
Med venlig hilsen,
Christian C.
