Firefox : Rahmen um geschachtelttes div mit floats von Bjoern Wolter, 16.10.2007 11:51

Firefox : Rahmen um geschachtelttes div mit floats

Bjoern Wolter 16.10.2007 11:51

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">

<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>

<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>

</div>
</div>
</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;
}

Beitrag melden

– Informationen zu den Bewertungsregeln

Firefox : Rahmen um geschachtelttes div mit floats
Katharina 16.10.2007 12:50

css
– Informationen zu den Bewertungsregeln
Hallo Björn,

Irgendwie merkt FF nicht, das noch weitere DIV Container da sind,welche sich nach unten fortsetzen, sondern orientiert sich am div des menüs.

Nimm das height:90% aus Deinem #main raus, dann funktioniert das Ganze auch mit langem Text.

Grüße,
Katharina
Beitrag melden

–
Informationen zu den Bewertungsregeln
Firefox : Rahmen um geschachtelttes div mit floats
Gunnar Bittersmann Homepage des Autors 16.10.2007 12:50

css
– Informationen zu den Bewertungsregeln
Hello out there!

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.

Nachdem ich längeren Text eingefügt hatte, komme ich im DOM-Inspector des Firefox (immer ein guter Helfer) folgende berechneten Werte zu sehen:

angegebener/    berechneter
                        Defaultwert     Wert

body    height          auto            649px
        min-height      0               0

#view   height          auto            644px
        min-height      100%            649px

#main   height          90%             600px
        min-height      600px           600px

#text   height          auto            9693px
        min-height      0               0

Du hast ja für #main eine Höhe angegeben. Warum sollte #view deiner Meinung höher sein als zur Darstellung von #main erforderlich?

Dass es Opera so aussieht wie im IE mag daran liegen, dass du ihn wegen DOCTYPE-Angabe ohne System-Identifier (URI) in den Quirks-Mode schickst, in dem er Fehler des IE imitiert.

Wenn du auf '#main {height: 90%}' verzichtest, geht der Rahmen von #view bis unten.

See ya up the road,
Gunnar

--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Bjoern Wolter: Firefox : Rahmen um geschachtelttes div mit floats