Guten Tag!
Ich habe ein kleines Problem mit der CSS Anzeige im Internetexplorer.
Mal vorweg:
Richtige Anzeige bei: Firefox/2.0.0.6
Falsche Anzeige bei: InternetExplorer/7.0.5730.11
und zwar wird das kästchen was ich dann schlussendlich für meinen content haben will zu weit nach unten gesetzt! Ich habe ehrlich gesagt keine Ahnung warum das so ist und bitte euch deshalb um hilfe!
Danke
Neysor
URL: http://www.neysor.net/testpage/css-test/
Bild Firefox: http://www.neysor.net/testpage/css-test/screen/firefox.jpg
Bild Internet Explorer: http://www.neysor.net/testpage/css-test/screen/ie.jpg
Quelltext:
-------------------------------------
index.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Neysor.net</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Helmut Steinbrecher">
<link rel="stylesheet" href="design/style.css">
</head>
<body>
<div id="Seite">
<div id="Header"><h3 class="date">Sa, 04.08.2007</h3></div>
<div id="Menu">
<div id="Menubox">
<img src="design/menuboxstart.gif"><br> <!-- weil :before im ie nicht geht -->
<div id="Menuboxmiddle">
<!-- Linklist start -->
<a href="?" class="menubox">Home</a><br>
<a href="?" class="menubox">About</a><br>
<a href="?" class="menubox">Information</a><br>
<a href="?" class="menubox">Board</a><br>
<a href="?" class="menubox">Linklist</a><br>
<a href="?" class="menubox">FindME</a><br>
<a href="?" class="menubox">Photos</a><br>
<!-- Linklist end -->
</div>
<img src="design/menuboxend.gif"><br> <!-- weil :after im ie nicht geht -->
</div>
<div id="Loginbox">
<img src="design/loginboxstart.gif"><br> <!-- weil :before im ie nicht geht -->
<!-- Loginbox -->
<input type="text" name="username" value="username" class="formmenu"><br>
<input type="password" name="password" value="password" class="formmenu"><br>
<input type="submit" value="Enter" class="formmenubutton">
</div>
</div>
<div id="Content">
<div id="FensterHeader"></div>
<div id="FensterMiddle"></div>
<div id="FensterFooter"></div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>
-------------------------------------
style.css
-------------------------------------
body {
color: #000000; background-color: #C2C6DF;
font-family: Arial;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Seite { /* Allgemeine Seiteneigenschaften */
text-align: left;
margin: 0 auto;
padding: 0;
width: 904px;
background-image: url(../design/mitte.gif);
backround-repeat: repeat-y;
}
a { /* Link allgemein */
text-decoration: none;
color: #42427b;
font-weight: bold;
}
a:link, a:activated, a:visited { /* Link allgemein */
text-decoration: none;
color: #42427b;
font-weight: bold;
}
a:hover { /* Link allgemein */
text-decoration: none;
color: #000000;
font-weight: bold;
}
input, select, textarea { /* Formularfelder allgemein */
background-color: #e5e5ec;
border: 1px solid;
border-color: #b8b8b8;
}
div#Header { /* Grundbau des Headers */
text-align: left;
width: 904px;
height: 174px;
background-image: url(../design/oben.gif);
background-repeat: no-repeat;
}
.date { /* Für die richtige Anzeige des Datums im Header */
font-size: 12px;
color: #AF99FF;
font-weight: bold;
line-height: 292px;
margin-left: 638px;
}
div#Menu { /* Grundbau des Menus */
text-align: left;
float: left;
width: 139px;
margin: 5px 14px 5px 14px;
padding: 0;
}
div#Menubox { /* Grundbau der Menubox */
text-align: center;
width: 113px;
}
div#Menuboxmiddle { /* Mittlerer Teil der Menubox */
text-align: left;
font-family: Verdana;
font-size: 12px;
width: 113px;
padding-left: 18px;
padding-right: 14px;
background-image: url(../design/menuboxbackground.gif);
background-repeat: repeat-y;
}
A.menubox:link { /*Link in der Menubox */
font-weight: bold;
color: #42427b;
text-decoration: none;
}
A.menubox:visted { /*Link in der Menubox */
font-weight: bold;
color: #42427b;
text-decoration: none;
}
A.menubox:hover { /*Link in der Menubox */
font-size: 10px;
color: #000000;
text-decoration: none;
}
div#Loginbox { /* Einstellungen für die Loginbox */
width: 113px;
text-align: center;
}
.formmenu { /*Einstellungen für Formular im Menu */
width: 89px;
text-align: left;
margin-top: 6px;
padding-left: 2px;
border: 1px dashed;
border-color: #b8b8b8;
}
.formmenubutton { /* Einstellungen für den Button im Menu */
width: 53px;
text-align: center;
margin-top: 6px;
margin-left: 40px;
}
div#Content { /* Grundbau des Inhalts */
text-align: left;
width: 765px;
margin: 17px 15px 5px 150px;
padding: 0;
}
div#FensterHeader { /*Für ein Fenster */
widht: 723px;
background-image: url(../design/fensterheader.gif);
background-repeat: no-repeat;
height: 21px;
}
div#FensterMiddle { /*Für ein Fenster */
margin-top: 2px;
width: 721px;
min-height: 155px;
background-color: #eff0fa;
border: 1px solid;
border-color: #b8b8b8;
}
div#FensterFooter { /*Für ein Fenster */
margin-top: 2px;
widht: 723px;
background-image: url(../design/fensterfooter.gif);
background-repeat: no-repeat;
height: 21px;
}
div#Footer { /* Grundbau des Footers */
width: 904px;
height: 85px;
background-image: url(../design/unten.gif);
background-repeat: no-repeat;
clear: both; /* Damit sich div#Menu und div#Content bis zum Footer automatisch erweitern */
}
-------------------------------------