ich habe ein für mich merkwürdiges Verhalten beim IE7.
Vorweg gesagt, das ist meine erste Seite, die ich hauptsächlich in CSS erstellt habe und bin daher noch nicht ganz fit darin.
Also, folgendes Problem:
Im IE7 erschien bei mir der Footer immer zu weit unten oder zu weit rechts. Im Firefox funktioniert alles super.
Meine Homepage ist * * * mc-spike.de * * *
Nachdem ich etwas rumprobiert habe, habe ich es geschafft, auch mit dem IE den Footer korrekt anzeigen zu lassen.
Aber das komische ist, dass ich im HTML-Quelltext unter dem "div id=footer" einen leeren Kommentar schreiben muss. Fehlt der Kommentar, ist der Footer wieder verschoben.
Das kann aber doch nicht normal sein, dass ich einen leeren Kommentar schreiben muss. Oder?
Hier mal der HTML-Quellcode:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>* * * mc-spike.de * * *</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="text.css" rel="stylesheet" type="text/css">
<link href="layout.css" rel="stylesheet" type="text/css">
</head>
<body class="text">
<div id="rahmen">
<div id="titelbox"></div>
<div id="navigationbox">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="auto.html">Auto</a></li>
<li><a href="motorrad.html">Motorrad</a></li>
<li><a href="paintball.html">Paintball</a></li>
<li><a href="diverses.html">Diverses</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul></div>
<div id="rechtebox">
<h1 class="rechtskapitel">Auto</h1>
<h2 class="rechtskapitel">Kapitel:</h2>
<ul>
<li><a href="auto.html">Einleitung</a></li>
<li><a href="auto-chronik-1.html">Chronik</a></li>
<li><a href="auto-umbauten.html">Umbauten</a></li>
<li><a href="auto-fakes.html">Fakes</a></li>
<li><a href="auto-veranstaltungen.html">Veranstaltungen</a></li>
</ul>
<br><br>
<h2 class="rechtskapitel">externe Links:</h2>
<ul>
<li><a href="http://www.motor-talk.de" target="_blank">Motor-Talk Forum</a></li>
</ul>
</div>
<div id="mainbox">
<p>Text</p>
</div>
<div id="footer"><p class="footer">© 2009 by Maik Klöhn</p></div>
<!-- -->
</div>
</body>
</html>
Nur, wenn ich den rot markierten Kommentar einfüge, erscheint der Footer auch im IE7 korrekt.
Jetzt noch mein layout.css:
body {
margin: 0px;
padding: 0px;
background-color:#000000;
text-align:center;
}
#rahmen {
width:960px;
height:785px;
margin:0 auto;
margin-top: 20px;
text-align:left;
}
#titelbox {
width:960px;
height:125px;
background-color:#cccccc;
background-image:url(bilder/layout/titel.jpg);
vertical-align:bottom;
background-repeat:no-repeat;
background-position: center bottom;
}
#navigationbox {
width:960px;
height:20px;
background-color:#cccccc;
background-image:url(bilder/layout/navileiste.gif);
border:none;
vertical-align:bottom;
background-repeat:no-repeat;
background-position:center;
}
#navigationbox ul {
margin:0px;
padding-left:15px;
list-style-position: inside;
}
#navigationbox li {
padding-right:15px;
display:inline;
}
#navigationbox a {
color: #cccccc;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;
font-weight: bold;
}
#navigationbox a:active {
color:#933000;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;
font-weight: bold;
}
#navigationbox a:hover {
color:#933000;
text-decoration: none;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;
font-weight: bold;
}
#rechtebox {
width:210px;
height:620px;
padding:10px;
background-color:#cccccc;
float:right;
}
#mainbox {
position:absolute;
width:710px;
height:620px;
padding:10px;
background-color:#cccccc;
float:left;
}
#footer {
clear:both;
width:960px;
height:40px;
background-color:#cccccc;
background-image:url(bilder/layout/fussleiste.gif);
position:absolute;
margin-top:595px;
border:none;
/*vertical-align:bottom;*/
background-repeat:no-repeat;
background-position:center;
}
Ich hoffe da steigt jemand durch und kann mir helfen.