nicht angemeldet
Ich habe nachfolgende HTML+Css Datei.
Das ganze ist eine Layout aus: Topbanner, darunter 2Spalten, links MEnu, rechts der Text. Um das Layout soll mit CSS ein Rahmen gezeichnet werden. Für das Menü verwende ich die float:left Anweisung.
Im IE und Opera sieht alles wunderbar und gewollt aus. Im Firefox wird mein Rahmen aber nicht dynamisch um das gesamte Layout gezogen sondern hört bei der min-height auf. Ist der Text länger als Min-height wird der rahmen ganz frech durch den text gezogen. Irgendwie merkt FF nicht, das noch weitere DIV Container da sind,welche sich nach unten fortsetzen, sondern orientiert sich am div des menüs.
Kann mir jemand nen Tip geben wie ich das lösen kann. Im Forum als auch im Netz finde ich immer etwas mit clear:left; doch ich habe es schon an vielen stellen eingefügt ohne ergebnis:
Hier die HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta name="generator" content="PSPad editor, www.pspad.com">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="designwaisen">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="1 week">
<meta name="content-language" content="de">
<title>
</title>
<script type="text/javascript" language="JavaScript1.2" src="js/cookies.js">
</script>
<script type="text/javascript" language="JavaScript1.2" src="js/efa_fontsize.js">
</script>
<link rel="stylesheet" type="text/css" href="md.css">
</head>
<body>
<script type="text/javascript" language="JavaScript1.2">
if (efa_fontSize) efa_fontSize.efaInit();
</script>
<div id="view">
<div id="banner">
<img src="img/banner.jpg">
</div>
<div id="main">
<div id="menu">
<div id="sizer">
Schriftgröße wählen:<br>
<a href="#" title="Schrift vergrössern" onclick="efa_fontSize.setSize(1)"><img src="img/icon_gross.gif"></a> <a href="#" title="Standardschriftgrösse" onclick="efa_fontSize.setSize(0)"><img src="img/icon_normal.gif"></a> <a href="#" title="Schrift verkleinern" onclick="efa_fontSize.setSize(-1)"><img src="img/icon_klein.gif"></a> <noscript>Ihr Browser unterstützt keine JavaScript. Bitte verwenden Sie die Vergößerungsfunktion ihres Webbrowsers</noscript>
</div>
<ul>
<li>
<a href="index.html" title="Startseite" accesskey="0"><span id="activeItem">Startseite</span></a>
</li>
<li>
<a href="persoenliches.html" title="Persönliches ">Persönliches</a>
</li>
<li>
<a href="berufliches_und_weiterbildung.html" title="Berufliches und Weiterbildung">Weiterbildung</a>
</li>
<li>
<a href="ehrenamtliches_und_vereine.html" title="Ehrenamtliche Tätigkeiten">Ehrenamtlich</a>
</li>
<li>
<a href="politische_ehrenaemter.html" title="Politik">Politik</a>
</li>
<li>
<a href="ziele.html" title="Ziele ">Ziele</a>
</li>
<li>
<a href="presse.html" title="Presseinformationen">Presse</a>
</li>
<li>
<a href="kontakt.html" title="Kontaktadressen">Kontakt</a>
</li>
<li>
<a href="Impressum.html" title="Impressum">Impressum</a>
</li>
</ul>
</div><!-- menu -->
<div id="text">
<h2>
Impressum
</h2>
<p>
Verantwortlich, Konzept, Layout<br>
Bla Bla Blub<br>
Bla Bla Bluv<br>
<br>
12345 Ort<br>
</p>
<p>
Haftungsausschuss
</p>
<p>
Langer TExt (bitte durch langen ersetzen)
</p>
<p>
Langer TExt (bitte durch langen ersetzen)
</p>
<p>
Langer TExt (bitte durch langen ersetzen)
</p>
<p>
Langer TExt (bitte durch langen ersetzen)
</p>
<p>
Langer TExt (bitte durch langen ersetzen) </p>
</div><!--text -->
</div><!-- main -->
</div><!--view -->
</body>
</html>
Hier die CSS:
body {
background-color: white;
margin: auto;
padding: 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
text-align: center;
}
#banner {
background-color: #009ee0;
margin-bottom: 5px;
background-repeat: no-repeat;
}
#view {
width: 50em;
border-left: 5px solid #009ee0;
border-right: 5px solid #009ee0;
border-bottom: 5px solid #009ee0;
margin: auto;
text-align: left;
background-color: #fff;
min-width: 800px;
min-height:100%;
clear:all;
}
#main {
height: 90%;
min-height: 600px;
}
#text {
/*margin-left: 15.5em;*/
margin-left: 14.7em;
padding-right: 1px;
text-align:justify;
max-width:45em;
}
/* Menu Block */
#menu {
width: 14em;
max-width: 12.5em;
color: #000;
float:left;
margin: 0px;
padding: 0px 0.25em 0.25em 0.25em;
}
#menu ul {
margin: 0px;
padding: 0px;
}
#menu li {
list-style-type: none;
border-bottom: 1px solid #009ee0;
}
#menu ul a {
padding-left: 15px;
width: 13em;
display: block;
text-decoration: none;
overflow: hidden;
background-color: white;
color: #009ee0;
padding-top: 0.5em;
padding-bottom:0.5em;
}
#menu a:hover, #menu a:active, #menu a:focus{
color: Maroon;
font-weight:bold;
}
#activeItem
{
color: Maroon;
font-weight: bold;
}
#sizer
{
margin-top:10px;
margin-bottom:15px;
text-align:center;
}
#sizer a
{
text-decoration: none;
}
#sizer img
{
padding-right:5px;
margin-top:3px;
text-decoration: none;
border:0px;
width: 30px;
}
Gunnar Bittersmann