Frage stellen
habe bei der Seite: http://www.design-honk.de/css ein Problem.
Mein HTML Quelltext:
- Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Editor">
<link href="index.php-Dateien/layout.css" rel="stylesheet" media="screen">
<link href="index.php-Dateien/layout_fonts.css" rel="stylesheet" media="screen">
<link href="index.php-Dateien/layout_menu.css" rel="stylesheet" media="screen"><!--[if IE]>
<style type="text/css">@import url(css/ie_hacks.css);</style><![endif]-->
<title>Test</title>
</head>
<body bgcolor="#ffffff">
<div id="wrapper">
<div id="container">
<div id="container_headline"> </div>
<div id="spalte1"></div>
<div id="spalte2"></div>
</div>
<div id="clearDiv"> </div>
<div id="header"></div>
<div id="footer"></div>
<div id="nav_main">
<div id="ebene0">
<ul>
<li><a href="...">Startseite</a></li>
<li><a href="...">Lösungen</a></li>
<li><a href="...">Partner</a></li>
<li><a href="...">Unternehmen</a></li>
<li><a href="...">Kontakt</a></li>
</ul>
</div>
</div>
<div id="side_menu"></div>
</div>
</body>
</html>
und das relevante stylesheet:
- Code: Alles auswählen
*{margin: 0;}
body
{
border:0px solid green;
background-color: #F8F8FF;
width: 100%;
margin: 0px;
}
#wrapper
{
border:0px solid green;
background-color: #F8F8FF;
width: 100%;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#container
{
border:0px solid yellow;
/*background-color: #DCDCDC;*/
margin-left: 20%;
width: 77%;
margin-right: 5px;
margin-top: 110px;
padding: 10px;
padding-bottom: 10px;
min-height: 800px;
text-align: justify;
-moz-border-radius:30px;
}
#spalte1
{
margin: 5px 5px 5px 5px;
width: 46%;
float: left;
height: 100%
}
#spalte2
{
margin: 21px 5px 5px 5px ;
width: 46%;
height: 100%;
min-height: 80%;
float: right;
}
#header
{
position: absolute;
width: 98%;
margin: 5px 0px 1px 5px;
top: 0px;
border:0px solid red;
background-image: url(../pics/logo_cala.gif);
height: 60px;
background-repeat: no-repeat;
}
#footer
{
clear:left;
margin: 30px 15px 10px 15px;
border-top:1px solid #191970;
padding: 20px 0px 10px 0px;
text-align: center;
}
#clearDiv{
clear: both;
position:relative;
line-height: 1px;}
#container_headline
{
margin: 5px;
display: block;
}
Im IE funktioniert dei Seite nun genauso wie ich es mir vorstelle...
Ich habe einen Header,zwei Navileisten, das zweispaltige Content Feld und unten drunter den Zentrierten Footer.
Nur im Firefox wird die Grenze des Containers irgendwie nicht berücksichtigt. Wenn man auf den Link oben klickt, sieht man, das der Inhalt von Spalte 1 und Spalte 2 einfach über die DIV Grenzen hinausgeschrieben wird, und auch den Footer überschreibt.
Woran könnte das liegen? Wasmache ich falsch? Im IE sieht genauso aus wie ich es mir vorgestellt hab.
Zu Anfang hatte ich bei Div Seite1 und Seite 2 noch eine Hintergrundfarbe, aber selbst da wurde das DIV schon wesentlich kleiner dargestellt als der Textinhalt. Hab dann die Hintergrundfarbe einfach weggelassen, und dachte es wäre ok...hab dann aber erst das beschriebene Problem gesehen, das er bei viel Text die DIV Grenzen nicht berücksichtig
(Ich habe die Texte in dem Codeschnippsel hier entfernt, der besseren Übersichtlichkeit wegen)
