✔ Box Model, innerer Div fängt erst unterhalb des letzten Divs an!

[mrepox]

Hallo Leutz,

hier habe ich mein erstes Tabellenloses Markup und war bisher unter Firefox, Konqueror und Opera zufrieden.

Dann habe ich doch mal auf einem Winni den Internetexplorer versucht und folgenden gravierenden Fehler entdeckt.

Unter dieser URL http://www.webexil-linux.de seht ihr mit dem IE den Fehler, das der DIV in der Mitte erst nach dem vertikalen
Ende eines seiner Nachbar DIVS anfängt.

Es ist mir klar das der IE mit dem Box Model seine Probleme hat, nur ist mir dieser Fehler nicht bekannt.

Bevor ich hier Markup poste, könnte es ja sein, das du auch schonmal das Prob gehabt hast!

Aufbau: Header, ein Nest mir drei divs (das Content DIV in der MItte ist das was nicht dahin will wo es soll!) und Footer.


Hier mal ein Screenshot wie es sein soll von Firefox

 

[Maik]

Habe mal etwas mit der Breitenangabe für das DIV #content experimentiert, bis die Box im IE nach oben rutscht:

#content {
background-image: url(bilder/bgtheme.jpg);
width:495px;
margin:0 211px 0 203px;
min-height: 590px;
font: 1em/1.2em Verdana, sans-serif;
color: #6A6A65;
padding: 5px;
vertical-align:top;
}

* html #content { /* Für IE */
width: 451px;
}

• Testumgebung: Win2k, IE 6.0

 

[mrepox]

Hey, du bist spitze!

Allerdings klappt das nur mit der Startseite!
Wenn ich dann z.b. How to's anklicke ists wie vorher.

Gruß Markus

EDIT:
Muß ich doch korrigieren, bei downloads und bei news ists nur. bin da wohl zu breit.
und das DIV mit der Werbung rutsch jetzt auch mit hoch im IE6. Schade!

 

[Maik]

Erweitere das Stylesheet mit folgender Regel, da der IE die margin-Angaben verdoppelt:

#news {
background-image: url(bilder/bgtheme.jpg);
float: right;
width: 160px;
height:100%;
margin: 20px;
padding: 5px;
font: 1em/1.5em Verdana, sans-serif;
color: #6A6A65;
text-align:left;
}

* html #news { /* Für IE */
margin: 10px;
}

Und aktualisiere den zunächst gezeigten CSS-Code:

* html #content { /* Für IE */
width: 468px;
}

 

[mrepox]

Ja, hat auch geklappt!

Hast du denn noch eine Idee wie ich das Div mit der Werbung unten verbannen kann?

In Firefox, Opera und Konqui bleibt das div immer schön über dem Footerbereich, wo ichs auch lassen möchte, so springt es immer an das Ende des Content.

Wenn du da auch noch was weißt, bist du mein Held der Woche!

Gruß Markus

 

[Maik]

Jetzt werde ich erstmal zum Helden der Nacht und werfe morgen früh nochmal einen Blick auf den CSS-Code

 

[Maik]

Probiere es mal mit einer Breitenangabe:

#content2 {
background-image: url(bilder/bgctheme.jpg);
color:black;
height:40px;
margin:0 0 0 203px;
border-top:1px solid #ada99f;
border-bottom:1px solid #ada99f;
font: 1.0em/1.5em Verdana, sans-serif;
color: #6A6A65;
padding: 5px;
}

* html #content2 { /* Für IE */
width: 687px;
}

 

[mrepox]

Danke, werde es heute abend mal testen, hier habe ich nur Linux.

Wie kann man eigentlich erreichen das bei vergößerter Schrift die Shoutbox nicht über den Footer, sprich das Seitenende hinauswächst?
Die Shoutbox sitzt mit in dem Nest wo die drei Divs liegen und unter der Navigation und der Infobox.
Die Mainbox müßte mitwachsen, nur habe ichs bisher nicht hinbekommen.


Gruß Markus

 

[Maik]

Vielleicht hilft es, wenn du die Höhenangabe für die Shoutbox rausnimmst?

 

[mrepox]

Die Breitenangabe hat im IE6 nichts gebracht. Wenn du auch den Interna Link klickst siehst du es.

Gruß Markus

PS: Wenn ich die Höhenangabe der Shoutbox rausnehme, würde sie mit jeden neuen Eintrag mitwachsen. Also hätte ich keine Scrollbar mehr!