• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Firefox Problem - Div in Div wird nicht angezeigt nur im IE

Status
Für weitere Antworten geschlossen.
T

Tim0o

Neues Mitglied
Hi,

ich habe folgendes Problem. Ich habe eine Seite mit css erstellt, doch werden die Boxen bei mir im IE richtig angezeigt und nicht bei Firefox. Dort sind die boxen außen, also aus der Page, beim IE sind sie in der Page, da wo sie sein sollten.

Kann mir einer Helfen? Lösungsmöglichkeiten?

Der Quellcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" media="screen">
body{
background-color: #ccc;
}
#container{
width: 800px;
background-color: #333;
border: 2px solid black;
}
#header{
width: 100%;
height: 150px;
background-image: url(banner.jpg);
}
#navigation{
background-color: #333;
width: 100%;
margin-left:0px;

}
/*Navigation*/
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
background:transparent url(nav_bg.png) repeat-x top left;
font-family:Arial, Helvetica, sans-serif;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
ul#menu li
{
display:block;
float:left;
margin:0;
padding:0;
}
ul#menu li a
{
display:block;
float:left;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(nav_bg.png) 0px -30px no-repeat;
}

ul#menu li a.current
{
display:inline;
height:22px;
background:transparent url(nav_bg.png) 0px -30px no-repeat;
float:left;
margin:0;
}
/*End Navigation*/
#content{
background-color: #333;
width: 100%;
height: 100px;
}
#info1{
width: 20%;
height: 200px;
background-color: #333;
float: left;
border: 1px solid deepskyblue;
padding: 10px;
margin: 10px;

}
#info2{
width: 40%;
height: 200px;
background-color: #333;
float: left;
border: 1px solid deepskyblue;
padding: 10px;
margin: 10px;
}
#info3{
width: 20%;
height: 200px;
background-color: #333;
float: right;
border: 1px solid deepskyblue;
padding: 10px;
margin: 10px;
}
#footer{
width: 100%;
height: 25px;
background-image: url(footer.jpg);
}
</style>
</head>
<body>
<center>
<div id="container">
<div id="header">
</div>
<div id="navigation">
<div>
<ul id='menu'>
<li class="button"><a class='current' href='http://' >Home</a></li>
<li class="button"><a href='http://' >Members</a></li>
<li class="button"><a href='http://' >Wars</a></li>
<li class="button"><a href='http://' >Server</a></li>
<li class="button"><a href='http://' >History</a></li>
<li class="button"><a href='http://' >Contact</a></li>
<li class="button"><a href='http://' >Impressum</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="info1"></div>
<div id="info2"></div>
<div id="info3"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Danke im Voraus.
 
Wie es aussehen soll, kann ich nur raten.
Es sieht im IE6 ganz anders aus wie im iE7.

Damit die Kästchen mit dem blauer Border die content-Box auseinanderdrücken, mußt du das floaten wieder beenden (clearen)
sonst schwimmen sie nur unter der Oberkante von der content-Box und geben ihr keine Höhe:

Code: 
#footer{
width: 100%;
height: 25px;
background-image: url(footer.jpg);
clear : both;
}
Das die Internet Explorer die Box trotzdem strecken ist ein Bug.
Alle anderen Browser wollen ein clear.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben