Frage stellen
ich habe folgendes Problem mit dem IE 8:
Ich habe ein Layout erstellt, dass diverse div-Container anordnet.
Im Firefox sieht das so aus wie ich das will, im IE wird erst mal der gesamte Haupt-div nicht zentriert angezeigt, und dann werden ab einem bestimmten Punkt die divs verschoben und auch Änderungen im css veranlassen den IE nicht dazu, am Layout irgendwas zu ändern.
Hier erst mal der Code, mit dem ich schon 2 verschiedene CSS einbinde:
- Code: Alles auswählen
<link type="text/css" rel="stylesheet" href="./css/style.css">
<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="./css/style_IE.css">
<![endif]-->
Und hier der Code für die CSS im Firefox (momentan sind die noch identisch,
div.menuelinks, div.menueintern, div.menuerechts, div.hauptlogin und div.content sind verschoben, div.footer scheint dann wieder zu passen
- Code: Alles auswählen
body{
margin: 0 0 0 0;
text-align: center;
background: #ffffff;
}
div.hauptfenster{
margin: auto;
width: 902px;
height: 1167px;
text-align: center;
}
div.obenlinks{
position: absolute;
margin-left: 0px;
margin-top: 0px;
width: 200px;
height: 104px;
background: #3d414d url(../images/ForexTrading_03.png) no-repeat;
}
div.obenmitte{
position: absolute;
margin-left: 201px;
margin-top: 0px;
width: 501px;
height: 104px;
background: #3d414d url(../images/ForexTrading_05.png) no-repeat;
}
div.obenrechts{
position: absolute;
margin-left: 703px;
margin-top: 0px;
width: 200px;
height: 104px;
background: #3d414d url(../images/ForexTrading_07.png) no-repeat;
}
div.header{
position: absolute;
margin-left: 0px;
margin-top: 104px;
width: 903px;
height: 333px;
background: #3d414d url(../images/ForexTrading_09.png);
}
div.header2{
position: absolute;
margin-left: 0px;
margin-top: 437px;
width: 903px;
height: 81px;
background: #3d414d url(../images/ForexTrading_10.png);
}
div.menueoben{
position: absolute;
margin-left: 0px;
margin-top: 518px;
width: 903px;
height: 113px;
background: #3d414d url(../images/ForexTrading_11.png);
}
td.menueoben{
padding: 5 5 5 5;
width: 20%;
height: 110px;
text-align: left;
vertical-align: top;
font-size: 20px;
color: #e5e5e5;
}
div.menuelinks{
position: absolute;
margin-left: 30px;
margin-top: 635px;
width: 201px;
height: 500px;
}
td.menueintern{
width: 201px;
height: 35px;
padding: 0 0 0 0 ;
text-align: center;
vertical-align: middle;
background: #e5e5e5 url(../images/ForexTrading_15.png) no-repeat;
color: #e5e5e5;
}
div.menuerechts{
/*position: absolute;*/
margin-left: 650px;
margin-top: 640px;
width: 201px;
height: 500px;
z-index: 10;
}
div.hauptlogin{
position: absolute;
margin-left: 1px;
margin-top: 1px;
width: 201px;
height: 155px;
text-align: center;
vertical-align: middle;
background: #3d414d url(../images/ForexTrading_14.png) no-repeat;
}
div.content{
position: absolute;
overflow: auto;
margin-top: 631px;
margin-left: 213px;
width: 470px;
height: 450px;
padding: 10 10 10 10;
z-index: 1;
}
div.footer{
z-index: 99;
position: absolute;
margin-left: 0px;
margin-top: 1135px;
width: 903px;
height: 36px;
background: #3d414d url(../images/ForexTrading_23.png) no-repeat;
}
und hier noch der Aufbau der Seite:
- Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link type="text/css" rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="./css/favicon.ico">
<title>
Forex Trading
</title>
<script type="text/javascript">
function chkFormular () {
if (document.Formular.Vorname.value == "") {
alert("Bitte Ihren Vornamen eingeben!");
document.Formular.Vorname.focus();
return false;
}
if (document.Formular.Name.value == "") {
alert("Bitte Ihren Nachnamen eingeben!");
document.Formular.Name.focus();
return false;
}
if (document.Formular.Email1.value == "") {
alert("Bitte Ihre E-Mail-Adresse eingeben!");
document.Formular.Email1.focus();
return false;
}
if (document.Formular.Email1.value.indexOf("@") == -1) {
alert("Keine gültige E-Mail-Adresse!");
document.Formular.Email1.focus();
return false;
}
if (document.Formular.Strasse.value == "") {
alert("Bitte Ihre Strasse eingeben!");
document.Formular.Strasse.focus();
return false;
}
}
</script>
</head>
<body>
<!-- Hier zeigen wir nun einfach mal die Liste der gefundenen Analysen an -->
<div class="hauptfenster">
<div class="obenlinks">
</div>
<div class="obenmitte">
</div>
<div class="obenrechts">
<img src="./images/head.png" style="float: right; width: 83px; height:83px;">
<p class="loginstatuskunde">Sie sind nicht angemeldet <a href="/forex/index.php?aktion=loginmask">anmelden</a></p>
</div>
<div class="header">
</div>
<div class="header2">
</div>
<div class="menueoben">
<table width="900px" height="110px" >
<tr>
<td class="menueoben">
<a class="footer" href="index.php&inhalt=screenshots">
Screenshots
<img src="./images/screenshots.png" width="56" height="56" style="float:right;"><br /><br />
<p style="text-align: left; font-size: 14px; color: #e5e5e5;">Screenhots aus unserem internen Bereich</p>
</a>
</td>
<td class="menueoben">
<a class="footer" href="index.php&inhalt=techanalysis">
Technische
<img src="./images/technisch.png" width="56" height="56" style="float:right;">
<br />Analysen
<p style="text-align: left; font-size: 14px; color: #e5e5e5;">technische Analysen der vergangenen Tage</p>
</a>
</td>
<td class="menueoben">
<a class="footer" href="index.php&inhalt=fundanalysis">
Fundamentale
<img src="./images/fundamental.png" width="56" height="56" style="float:right;">
<br />Analysen
<p style="text-align: left; font-size: 14px; color: #e5e5e5;">Fundamentalanalysen der vergangenen Tage</p>
</a>
</td>
<td class="menueoben">
<a class="footer" href="index.php&inhalt=pdf">
PDF-
<img src="./images/pdf.png" width="56" height="56" style="float:right;">
<br />Dokumente
<p style="text-align: left; font-size: 14px; color: #e5e5e5;">Informationen zu verschiedenen Themen</p>
</a>
</td>
<td class="menueoben">
<a class="footer" href="index.php&inhalt=screenshots">
Depotentwicklung<br /> <br />
<p style="text-align: left; font-size: 14px; color: #e5e5e5;">Die Depotentwicklung in der Vergangenheit</p>
</a>
</td>
</tr>
</table>
</div>
<div class="menuelinks">
<!-- Hier nun die Tabelle mit den Menuepunkten für den internen Bereich -->
<table>
<tr>
<td class="menueintern">Handelsraum</td>
</tr>
<tr>
<td class="menueintern">Besprechungsraum</td>
</tr>
<tr>
<td class="menueintern">Fundamentalanalysen</td>
</tr>
<tr>
<td class="menueintern">Technische Analysen</td>
</tr>
<tr>
<td class="menueintern">Seminarraum</td>
</tr>
<tr>
<td class="menueintern">Kundenbetreuung</td>
</tr>
</table>
</div>
<div class="content">
<p class="h_content">Überschrift des Inhaltes</p><p class="content">Hier steht jeweils der Inhalt der 'Seite</p></div>
<div class="menuerechts">
<div class="hauptlogin">
<form ACTION="/forex/index.php?aktion=login" METHOD="POST">
<table class="login">
<tr class="login">
<th class="login" colspan="2">
Bitte melden Sie sich an</th>
</tr>
<tr class="login">
<th class="login">
Username</th>
<td class="login">
<input type="text" name="username" class="login" size ="15" maxlenght="30">
</td>
</tr>
<tr class="login">
<th class="login">
Passwort</th>
<td class="login">
<input type="password" name="password" class="login" size ="15" maxlenght="20">
</td>
</tr>
<tr class="login">
<th class="login" colspan="2" style="text-align: center;">
<input type="submit" VALUE="anmelden" class="login" >
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="footer">
<table width="100%">
<tr>
<td class="footerlinks">
© Forex Trading - www.xxxxxxxxxxx.eu - 2009
</td>
<td class="footerrechts">
<a class="footer" href="index.php?aktion=aboutus">About us</a>
<a class="footer" href="index.php?aktion=kontakt">Kontakt</a>
<a class="footer" href="index.php?aktion=disclaimer">Datenschutzerklärung</a>
<a class="footer" href="index.php?aktion=impressum">Impressum</a>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Ich habe keine Idee mehr, warum der IE sich so beharrlich weigert, zu tun was ich will
Viele Grüße
Manfred