IE und Firefox Bereichshöhe mit CSS

ich bekomme es einfach nicht gebacken.

Nachfolgenden Code habe ich mir zusammengestrickt. Hierbei soll ein ganz langer Text in einem Bereich stehen, der mit einem roten Balken oben und unten im Bereich "b" abschliesst. Im IE wird dieses so wie ich es haben möchte, korrekt dargestellt. Im Firefox nicht. Hier endet der untere Balken nach ein paar Pixeln und der Bereich c läuft über diesen Balken hinaus nach unten weiter. Ich habe hier schon einiges Ausprobiert, aber irgendwie bin ich im Augenblick zu blöd dazu.

(ACHTUNG: Es geht jetzt nicht darum den HTML-Code umzustellen. Nur falls einer von euch auf diese Idee kommen sollte)

Code

<div id="a">
      <div class="b"> 
        <div id="c">
          Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text.
      </div>
    </div>
</div>

Alles anzeigen

Code

#a { 
      width:               776px;
}


.b {
      height:              100%;
      width:               100%;
      border-top:          8px solid #FF0000; 
      border-bottom:       8px solid #FF0000; 
      background-color:    #00FF00; 
}


#c {
      width:               550px;
      margin-top:          10px;
      margin-right:        5px;
      float:               right;
      background-color:    #FF0000; 
}

Alles anzeigen

sejuma

Ich bin jetzt doch mal auf die Idee gekommen, CSS und HTML etwas zu vereinfachen (sorry). Wenn du die .b-Klasse für keinen anderen Zweck brauchst, kannst du die Angaben auch in #a packen.

CSS

Code

#a {
      width:               776px;
      border-top:          8px solid #FF0000;
      border-bottom:       8px solid #FF0000;
      background-color:    #00FF00;
      float:left;
}




#c {
      width:               550px;
      margin-top:          10px;
      margin-right:        10px;
      float:               right;
      background-color:    #FF0000;
}
*html #c {
	margin-right:5px;
}

Alles anzeigen

HTML

Code

<div id="a">
        <div id="c">
          Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. Hier steht ein ganz langer Text. usw
</div>
</div>

Tags