✔ Boxenmodell und IE

G

Gladiator6

Erfahrenes Mitglied
Hallo

Ich habe ein CSS Layout für eine Website umgebastelt. Auf dem Firefox wird alles korrekt angezeigt, nur auf dem IE halt nicht. Da das CSS recht unübersichtlich ist (hab es nicht selber geschrieben), dachte ich mir, ich beginne nochmals von vorn, und versuche das Layout komplett selber zu erstellen.

Nun hab ich das gemacht, und das funktioniert auch recht gut!

Die Website ist 900 px breit, zentriert.
Zuerst kommt der Banner 130px hoch.
Dann eine weiterer bereich 30px hoch,
die Navigation Links 160 px breit,
der Inhalt nebendran die restlichen 740px
am schluss noch eine Fusszeile.

Das hat alles bestens funktioniert, bis ich dann noch einen border von 1 px definieren wollte.

Wenn ich für den Inhalt einen Rahmen definiere, ist das Layout dahin (im IE).

Nun habe ich anstatt die Ränder mit CSS zu machen eine Grafik eingefügt und mit repeat wiederholt.

1. müsste das doch sicherlich mit CSS zu realisieren sein?
2. habe ich das Gefühl dass der 1px Rahmen von der Grafik breiter ist als wenn ich 1px in CSS definiere.

Hier das CSS

Code: 
#container {

width: 900px;
height: auto;
background-color: #006600;
color: white;
margin: 0 auto;
border: 1px solid black;
}

#header {

width: 900px;
height: 130px;
background-color: #00FF66;
border-bottom: 1px solid black;

}

#subheader {

width: 900px;
height: 30px;
background-color: #999999;
border-bottom: 1px solid black;
}

#navigation {

float: left;
width: 160px;
height: auto;
min-height: 400px;
background-color: #006600;
}

#content {
margin-left: 160px;
width: 740px;
min-height: 800px;
background-color: #00CC00;
background-image:url(content.png);
background-repeat:repeat-y;
}

#footer {
height: 35px;
background-color: #FF9900;
border-top: 1px solid black;
}

das HTML

HTML: 
<body>
<div id='container'>
    <div id='header'></div>
    <div id='subheader'></div>
    <div id='navigation'></div>
    <div id='content'></div>
    <div id='footer'></div>
</div>
</body>

Was für einen IE Hack könnte ich für mein Problem anwenden?
 
Hi,

so sieht der "IE-Hack" für #content aus:

CSS: 
#content {
margin-left: 160px;
/*width: 740px;*/
min-height: 800px;
background-color: #00CC00;
background-image:url(content.png);
background-repeat:repeat-y;
border-left:1px solid #000; /* linker Rahmen */
}

Grundsätzlich gilt in einer Floatumgebung: wenn eine Box mit margin eine Box umfliesst, erhält sie keine Breitenangabe. Ansonsten bricht der IE6 diese Box in die nächste Zeile um - der Rahmen spielt hierbei überhaupt keine Rolle.

mfg Maik
 
super, herzlichen Dank!

Heisst das wenn ein Element ein anderes umfliesst, dann wird die ganze Breite des Elternelements ausgefüllt?
 
Wenn es sich um ein Blockelement bzw. ein Inline-Element mit "Block-Level-Charakteristika" handelt: Ja :)

mfg Maik
 
Jaja ich sehe, es gibt noch viel zu lernen :-)

Kennst du vielleicht grad ein gutes Buch welches man auch als Nachschlagewerk brauchen kann?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück