nicht angemeldet
CSS - Anzeigeproblem
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 */
}
-------------------------------------
-
Ahoi,
div#Content { /* Grundbau des Inhalts */
text-align: left;
width: 765px;
margin: 17px 15px 5px 150px;
padding: 0;
}ohne Tests würde ich erstmal den Fehler bei den Margins hier vermuten. Nimm die mal testweise raus.
Ansonsten könnte noch ein Zusammenhang mit dem Loginfeld links bestehen, weil der Content genau da anfängt wo das Login aufhört.
Hier hilft wohl nur, durch stückweises Löschen erstmal die betreffende Stelle im CSS zu identifizieren.Gruß
MrWurf-
Danke werde ich probieren!
-
Danke werde ich probieren!
Also ich habe jetzt folgende sachen ausgeblendet und es funktioniert:
div#Menu { /* Grundbau des Menus */
text-align: left;
float: left;
/*width: 139px;*/
margin: 5px 14px 5px 14px;
padding: 0;
}
div#Content { /* Grundbau des Inhalts */
text-align: left;
/*width: 765px;*/
margin: 17px 15px 5px 150px;
}ich versteh zwar nicht warum, allerdings scheint es mir so als ob im IE7 diese größenangabe zu groß war für die anzeige rechts und er somit einen zeilenumbruch erzeugt hat. Komisch, denn eigentlich ist der div in dem ich das eingebettet habe genau so groß wie diese 2 angaben...
Aber weniger ist oftmals mehr ^^
Danke für eure hilfe!
-
-