✔ Spaltenlayout in IE anders als Firefox

Status
Nicht offen für weitere Antworten.
Grille

Grille

Erfahrenes Mitglied
Hallo ...

ich habe ein Layout gebastelt um 3 Spalten darzustellen und auch einen Kopf.
Leider gibt es einige Probleme:

IE:
Hintere Box (hauptbox) soll 30px größer sein als angezeigt

Firefox:
Hintere Box (hauptbox) umschließt nicht alle Boxen
Textboxen bilden einen übermäßig großen Feiraum unterhalb des Textes

hier der CODE (css)
PHP: 
/* ***************************** SEITENEIGENSCHAFTEN ANFANG ***************************** */
body {
 padding: 10px;
 }
.clearfix:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }
.clearfix { display: block; }
.floatbox { overflow:hidden; }
#ie_clearing { display: none }
#page{
 border: 0px #667 solid;
 background: #fff;
 }
#page_margins {
 width:900px;                 /*Breite der gesamten Seite*/
 margin-left: auto;
  margin-right: auto;
 border: 0px #889 solid;
 min-width: 756px;
 max-width: 100em;
 margin:auto;
    }
/* ***************************** SEITENEIGENSCHAFTEN ENDE ***************************** */
/* ***************************** HAUPTBOX ANFANG ***************************** */
/*Die Hauptbox beinhaltet alle anderen Boxen ... sie kann nach unten begrenzt werden*/
.hauptbox {
 background-color: #eee;
 border: 0;
 width: 900px;
 left: 0px;
 top: 20px;
 }
/* ***************************** HAUPTBOX ENDE ***************************** */
/* ***************************** KOPFBOX ANFANG ***************************** */
/*Die "Kopfbox" ist vom selben Aufbau wie die Haptbox, nur ist sie nicht so hoch*/
.kopfbox {
 background-color: #caa;
 border: 0;
 width: 880px;
 height: 180px;
 position: relative;     /*die Position und "left" und "top" bestimmen die Position innerhalb der Hauptbox*/
 left: 10px;
 top: 10px;
 }
/* ***************************** KOPFBOX ENDE ***************************** */
/* ***************************** SPALTE 01 ANFANG ***************************** */
.spalte_01 {
 background-color: #acc;
 border: 0;
 position: relative;
 float:left;      /*dies ist der einzigste Unterschied zur Hauptbox und zur Kopfbox. "float" ermöglicht, dass die drei Boxen nebeneinander stehen; sie würden sonst untereinander stehen.*/
 width: 150px;
 left: 10px;
 top: 20px;
 }
/* ***************************** SPALTE 01 ENDE ***************************** */
/* ***************************** SPALTE 02 ANFANG ***************************** */
.spalte_02 {
 background-color: #cac;
 border: 0;
 position: relative;
 float:left;      /*dies ist der einzigste Unterschied zur Hauptbox und zur Kopfbox. "float" ermöglicht, dass die drei Boxen nebeneinander stehen; sie würden sonst untereinander stehen.*/
 width: 550px;
 left: 20px;
 top: 20px;
 }
/* ***************************** SPALTE 02 ENDE ***************************** */
/* ***************************** SPALTE 03 ANFANG ***************************** */
.spalte_03 {
 background-color: #cca;
 border: 0;
 position: relative;
 float:left;      /*dies ist der einzigste Unterschied zur Hauptbox und zur Kopfbox. "float" ermöglicht, dass die drei Boxen nebeneinander stehen; sie würden sonst untereinander stehen.*/
 width: 160px;
 left: 30px;
 top: 20px;
 }
/* ***************************** SPALTE 03 ENDE ***************************** */

hier die html
PHP: 
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='de' lang='de'>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'/>
        <link href='layout.css' rel='stylesheet' type='text/css'/>
    </head>
    <body>
        <!-- ######################################################### SEITENEIGENSCHAFTEN ANFANG ########################################################## -->
        <div id='page_margins'><div id='page' class='hold_floats'>
        <!-- ######################################################### SEITENEIGENSCHAFTEN ANFANG ########################################################## -->
            <!-- ############################################################ HAUPTBOX ANFANG ############################################################ -->
            <div class='hauptbox' id='clearfix'>
            <!-- ############################################################ HAUPTBOX ANFANG ############################################################ -->
                <!-- ############################################################ KOPF ANFANG ############################################################ -->
                <div class='kopfbox'>
                &nbsp;
                </div>
                <!-- ############################################################  KOPF ENDE  ############################################################ -->
                <!-- ############################################################ SPALTE 1 ANFANG ############################################################ -->
                <div class='spalte_01' id='clearfix'>
                <p>Terror-Alarm im Herzen Londons: Wenige Stunden, nachdem eine erste Autobombe entschärft werden konnte, hat die Polizei in einem zweiten Auto in der Park Lane am Hyde Park einen Sprengsatz entdeckt. Es seien ähnliche Substanzen wie in dem ersten Auto gefunden worden, teilte die Polizei auf einer Pressekonferenz mit. Es wird davon ausgegangen, dass zwischen den beiden Funden eine Verbindung besteht.</p>
                </div>
                <!-- ############################################################  SPALTE 1 ENDE  ############################################################ -->
                <!-- ############################################################ SPALTE 2 ANFANG ############################################################ -->
                <div class='spalte_02' id='clearfix'>
                <p>Für die Sicherheitskräfte der Stadt war Großalarm ausgelöst worden, nachdem die Polizei in der Nacht die erste voll funktionsfähige Autobombe entdeckt hatte. Geparkt war der Wagen vor einem Nachtclub in einem belebten Viertel der Stadt. Im Inneren des Fahrzeugs fanden die Ermittler mehrere Kanister voller Benzin, Gasflaschen und eine größere Menge an Nägeln. Diese hätten im Falle einer Explosion wie Geschosse gewirkt. Die Sicherheitskräfte durchsuchen jetzt die Straßen der Metropole nach weiteren Sprengsätzen.</p>
                </div>
                <!-- ############################################################  SPALTE 2 ENDE  ############################################################ -->
                <!-- ############################################################ SPALTE 3 ANFANG ############################################################ -->
                <div class='spalte_03' id='clearfix'>
                <p>Wer den ersten Wagen in dem Ausgehviertel geparkt hat, ist noch unklar. Rückschlüsse auf Verdächtige oder die Anzahl möglicher Drahtzieher gibt es bisher nicht. Dafür sei es noch zu früh, betont Peter Clarke mehrfach auf einer eilig einberaumten Pressekonferenz. Experten erinnert die technische Konstruktion des Sprengsatzes allerdings an Methoden, die auch vom Terrornetzwerk Al Kaida verwendet werden. Besonders beängstigend allerdings ist, dass solche Bomben fast überall gebaut werden können - und das, ohne dass die Polizei davon etwas mitbekäme.</p>
                </div>
                <!-- ############################################################  SPALTE 3 ENDE  ############################################################ -->
 
            <!-- ############################################################  HAUPTBOX ENDE  ############################################################ -->
            </div>
            <!-- ############################################################  HAUPTBOX ENDE  ############################################################ -->
        <!-- ########################################################## SEITENEIGENSCHAFTEN ENDE ########################################################### -->
        </div></div>
        <!-- ########################################################## SEITENEIGENSCHAFTEN ENDE ########################################################### -->
    </body>
</html>

Könnt ihr mir sagen was ich falsch mache .. ?

Vielen Dank .. Grille
 
Hi!

Fehler Nr.1: Du rufst da eine ID clearfix auf, obwohl im Stylesheet eine Klasse angelegt wurde. Zudem muß die Klasse nicht in den floatenden Boxen, sondern ausschliesslich im DIV hauptbox aufgerufen werden - also:

Code: 
<div class='hauptbox clearfix'>

Fehler Nr.2: Durch die Positionsangaben der inneren Boxen, überlappen diese (insbesondere Spalte 03) zusätzlich das DIV .hauptbox.

Lösung: die Positionierung mit Hilfe der margin-Eigenschaft vornehmen.

Desweiteren hab ich mal die rechte Spalte spalte_03 mit float:right ausgezeichnet und die mittlere Spalte spalte_02 anstelle der float:left-Eigenschaft mit einem entsprechenden Außenabstand zu den beiden äußeren Spalten versehen. Hierfür wird dann im HTML-Code die Reihenfolge der drei Spalten umgestellt:

Code: 
<div class="spalte_01">...</div>
<div class="spalte_03">...</div>
<div class="spalte_02">...</div>
Den unerwünschten Abstand unterhalb des Textes stellst du mit dieser CSS-Regel für das p-Element ab:

Code: 
p {
margin: 0;
}

Und hier der überarbeitete HTML- und CSS-Code:

Code: 
<!-- ######################################################### SEITENEIGENSCHAFTEN ANFANG ########################################################## -->
        <div id='page_margins'><div id='page'>
        <!-- ######################################################### SEITENEIGENSCHAFTEN ANFANG ########################################################## -->
            <!-- ############################################################ HAUPTBOX ANFANG ############################################################ -->
            <div class='hauptbox clearfix'>
            <!-- ############################################################ HAUPTBOX ANFANG ############################################################ -->
                <!-- ############################################################ KOPF ANFANG ############################################################ -->
                <div class='kopfbox'>
                &nbsp;
                </div>
                <!-- ############################################################  KOPF ENDE  ############################################################ -->
                <!-- ############################################################ SPALTE 1 ANFANG ############################################################ -->
                <div class='spalte_01'>
                <p>Terror-Alarm im Herzen Londons: Wenige Stunden, nachdem eine erste Autobombe entschärft werden konnte, hat die Polizei in einem zweiten Auto in der Park Lane am Hyde Park einen Sprengsatz entdeckt. Es seien ähnliche Substanzen wie in dem ersten Auto gefunden worden, teilte die Polizei auf einer Pressekonferenz mit. Es wird davon ausgegangen, dass zwischen den beiden Funden eine Verbindung besteht.</p>
                </div>
                <!-- ############################################################  SPALTE 1 ENDE  ############################################################ -->

                <!-- ############################################################ SPALTE 3 ANFANG ############################################################ -->
                <div class='spalte_03'>
                <p>Wer den ersten Wagen in dem Ausgehviertel geparkt hat, ist noch unklar. Rückschlüsse auf Verdächtige oder die Anzahl möglicher Drahtzieher gibt es bisher nicht. Dafür sei es noch zu früh, betont Peter Clarke mehrfach auf einer eilig einberaumten Pressekonferenz. Experten erinnert die technische Konstruktion des Sprengsatzes allerdings an Methoden, die auch vom Terrornetzwerk Al Kaida verwendet werden. Besonders beängstigend allerdings ist, dass solche Bomben fast überall gebaut werden können - und das, ohne dass die Polizei davon etwas mitbekäme.</p>
                </div>
                <!-- ############################################################  SPALTE 3 ENDE  ############################################################ -->
                <!-- ############################################################ SPALTE 2 ANFANG ############################################################ -->
                <div class='spalte_02'>
                <p>Für die Sicherheitskräfte der Stadt war Großalarm ausgelöst worden, nachdem die Polizei in der Nacht die erste voll funktionsfähige Autobombe entdeckt hatte. Geparkt war der Wagen vor einem Nachtclub in einem belebten Viertel der Stadt. Im Inneren des Fahrzeugs fanden die Ermittler mehrere Kanister voller Benzin, Gasflaschen und eine größere Menge an Nägeln. Diese hätten im Falle einer Explosion wie Geschosse gewirkt. Die Sicherheitskräfte durchsuchen jetzt die Straßen der Metropole nach weiteren Sprengsätzen.</p>
                </div>
                <!-- ############################################################  SPALTE 2 ENDE  ############################################################ -->

            <!-- ############################################################  HAUPTBOX ENDE  ############################################################ -->
            </div>
            <!-- ############################################################  HAUPTBOX ENDE  ############################################################ -->
        <!-- ########################################################## SEITENEIGENSCHAFTEN ENDE ########################################################### -->
        </div></div>
        <!-- ########################################################## SEITENEIGENSCHAFTEN ENDE ########################################################### -->
Code: 
.hauptbox {
 background-color: #eee;
 border: 0;
 width: 900px;
 left: 0px;
 top: 20px;
 padding-bottom: 10px;
 }

.kopfbox {
 background-color: #caa;
 border: 0;
 width: 880px;
 height: 180px;
 position: relative;     
 margin-left: 10px;
 top: 10px;
 }

.spalte_01 {
 background-color: #acc;
 border: 0;
 position: relative;
 float:left;      /*dies ist der einzigste Unterschied zur Hauptbox und zur Kopfbox. "float" ermöglicht, dass die drei Boxen nebeneinander stehen; sie würden sonst untereinander stehen.*/
 width: 150px;
 margin-left: 10px !important; /* Für moderne Browser */
 margin-left: 5px; /* Für IE (<7) */
 margin-top: 20px;
 }

.spalte_02 {
 background-color: #cac;
 border: 0;
 position: relative;
 margin: 20px 180px 0 170px;
 }

.spalte_03 {
 background-color: #cca;
 border: 0;
 position: relative;
 float: right;    
 width: 160px;
 margin-right: 10px !important; /* Für moderne Browser */
 margin-right: 5px; /* Für IE (<7) */
 margin-top: 20px;
 }

 p {
 margin: 0;
 }
 
Danke .. ich werde das ganze nochmal durcharbeiten, damit ich es richtig verstehe.
 
Hallo :)

Hab mir das Ganze auch mal angeschaut und auch das von Grille mit dem von michaelsinterface umgeändert. Was mir aber immernoch nicht ganz klar ist sind einige angaben im CSS z.B. die doppelten margin Anweisungen in den Spalten, welchen zweck erfüllen diese ? Ich kann keinen Unterschied erkennen wenn ich sie weg lasse !

Ich hab hier mal eine abgeänderte Variante die ich im IE7, Firefox2 und Opera9.2 getestet habe und keine ersichtlichen unterschiede erkennen konnte. Bin aber für jeden Hinweis, wieso/weshalb das nicht so gemacht werden sollte, dankbar ;)

Die CSS-Datei:
PHP: 
* {
    padding:0px;
    margin:0px;
}
body { padding: 10px; }
p { margin: 0; }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix { display: block; }

/* ***************************** HAUPTBOX ANFANG ***************************** */
.hauptbox {
    position:relative;
    background-color: #eee;
    border: 0;
    width: 880px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}

/* ***************************** KOPFBOX ANFANG ***************************** */
/*Die "Kopfbox" ist vom selben Aufbau wie die Haptbox, nur ist sie nicht so hoch*/
.kopfbox {
    position: relative;
    background-color: #caa;
    border: 0;
    height: 180px;
}

/* ***************************** SPALTEN ANFANG ***************************** */
.spalte_01 {
    position:relative;
    background-color: #acc;
    border: 0;
    float:left;
    width: 150px;
    margin-top: 10px;
}
.spalte_02 {
    position:relative;
    background-color: #cac;
    border: 0;
    margin-left: 160px;
    margin-right: 170px;
    margin-top: 10px;
}
.spalte_03 {
    position:relative;
    background-color: #cca;
    border: 0;
    float:right;
    width: 160px;
    margin-top: 10px;
}

Um die Innenabstände des .hauptbox zu realisieren und die 900px weite beizubehalten, habe ich die breite der Hauptbox auf 880px festgelegt weil sich die paddings zu der "width" dazuaddieren.

Hier die HTML-Datei:
PHP: 
<body>
        <div class="hauptbox clearfix">
            <div class="kopfbox"></div>
            <div class="spalte_01">
                <p>Terror-Alarm im Herzen Londons: Wenige Stunden,
                nachdem eine erste Autobombe entschärft werden konnte,
                hat die Polizei in einem zweiten Auto in der Park Lane am Hyde Park einen Sprengsatz entdeckt.
                Es seien ähnliche Substanzen wie in dem ersten Auto gefunden worden,
                teilte die Polizei auf einer Pressekonferenz mit.
                Es wird davon ausgegangen, dass zwischen den beiden Funden eine Verbindung besteht.</p>
            </div>
            <div class="spalte_03">
                <p>Wer den ersten Wagen in dem Ausgehviertel geparkt hat,
                ist noch unklar.
                Rückschlüsse auf Verdächtige oder die Anzahl möglicher Drahtzieher gibt es bisher nicht.
                Dafür sei es noch zu früh,
                betont Peter Clarke mehrfach auf einer eilig einberaumten Pressekonferenz.
                Experten erinnert die technische Konstruktion des Sprengsatzes allerdings an Methoden,
                die auch vom Terrornetzwerk Al Kaida verwendet werden. Besonders beängstigend allerdings ist,
                dass solche Bomben fast überall gebaut werden können - und das,
                ohne dass die Polizei davon etwas mitbekäme.</p>
            </div>
            <div class="spalte_02">
                <p>Für die Sicherheitskräfte der Stadt war Großalarm ausgelöst worden,
                nachdem die Polizei in der Nacht die erste voll funktionsfähige Autobombe entdeckt hatte.
                Geparkt war der Wagen vor einem Nachtclub in einem belebten Viertel der Stadt.
                Im Inneren des Fahrzeugs fanden die Ermittler mehrere Kanister voller Benzin,
                Gasflaschen und eine größere Menge an Nägeln. Diese hätten im Falle einer Explosion wie Geschosse gewirkt.
                Die Sicherheitskräfte durchsuchen jetzt die Straßen der Metropole nach weiteren Sprengsätzen.</p>
            </div>
        </div>
    </body>

Ich habe auch einige Elemente weggelassen da mir nicht ganz klar war wozu sie überhaupt da waren und sie einige Probleme mit den margins und paddings verursachten.

Lasse mich aber sehr gern einess besseren belehren ;)

gruss Liro

Kritik erwünscht :)
 
Zuletzt bearbeitet:
Hi,

die in meinem Lösungsvorschlag doppelt vorhandenen margin-left und margin-right-Deklarationen in Verbindung mit der !important-Regel dienen für die IE-Versionen 5 - 6, da in ihnen der sog. "Double-Margin-Bug" bei floatenden Boxen auftritt, weshalb jeweils in der zweiten margin-Angabe der Wert auf 5px halbiert wird, um so auf die gewünschten 10px zu kommen. ;-)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück