IE6 Geisterabstand zwischen 2 gefloateten Containern

[Torsten]

Hallo liebe TP-CSS-Profis,

ich habe ein PRoblem wie im Titel schon beschrieben hiermit:
IE6 Geisterabstand zwischen 2 gefloateten Containern

Das Online-Beispiel gibt es hier: IE6 Geisterabstand zwischen 2 gefloateten Containern

Das HTML/CSS stammt aus einer Dreamweaver-Vorlage welche ich nur geringfügig im CSS abgeändert habe.

Original-CSS:

    .twoColFixLtHdr #sidebar1 {
    	float: left; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
    	width: 200px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
    	background: #EBEBEB; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
    	padding: 15px 10px 15px 20px;
    }
    .twoColFixLtHdr #mainContent { 
    	margin: 0 0 0 250px; /* Durch den linken Rand dieses div-Elements entsteht die Spalte am linken Seitenrand. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet. */
    	padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
    }

Modifiziertes-CSS:

.twoColFixLtHdr #sidebar1 {
    	float: left; /* Da es sich hier um ein floatendes Element handelt, muss eine Breite angegeben werden. */
    	width: 200px; /* Die tatsächliche Breite dieses div umfasst in standardgerechten Browsern bzw. im Standardmodus von Internet Explorer außer der Breite auch die Auffüllung und den Rahmen. */
    	background: #EBEBEB; /* Die Hintergrundfarbe wird nur für die Länge des Spalteninhalts angezeigt. */
    	padding: 15px 10px 15px 20px;
			border: 1px solid blue;
    }
    .twoColFixLtHdr #mainContent { 
    	margin: 0 0 0 232px; /* Durch den linken Rand dieses div-Elements entsteht die Spalte am linken Seitenrand. Der Spaltenbereich bleibt unabhängig von der Inhaltsmenge des sidebar1-div immer gleich. Sie können diesen Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 füllen soll, wenn der Inhalt in #sidebar1 endet. */
    	padding: 0 20px; /* padding (Auffüllung) bezeichnet den Innenabstand und margin (Rand) den Außenabstand der div -Box. */
			border: 1px solid red;
    }

Es geht um den Sidebar und den Content-Container, diese sollten sich nahtlos aneinander schmiegen auch im IE

Ich habe dafür bis jetzt keine Lösung gefunden *haareausrauf*

[steffenk]

auch nicht mit
* html {padding:0;margin:0} ?

[Torsten]

Zitat von steffenk

auch nicht mit
* html {padding:0;margin:0} ?

Nein leider nicht... (habs mal im obigen Beispiel eingebaut)
Auch wenn ich das "float" herausnehme und dem Content-Div einen entsprechenden "margain-left" verpasse, entsteht im IE trotzdem dieser Abstand...

[Rinaldo]

Im IE6 hab ich keinen Abstand zwischen den Boxen - Link. Hab das mal selbst nachgebaut .

[Torsten]

Zitat von Rinaldo

Im IE6 hab ich keinen Abstand zwischen den Boxen - Link. Hab das mal selbst nachgebaut .

Danke Rinaldo für den Nachbau, das bringt mich aber nicht wirklich weiter...

Auf der Adobe Summer School 2007 wurde demonstriert wie mit den in Dreamweaver mitgelieferten CSS-Layouts schnell neue Seiten erstellen kann.

Dieses Feature möchte ich nutzen und erweitern.
Dazu müsste ich wissen wo in dem Adobe-CSS der Fehler liegt...

[mogidala]

Das ganze kommt vom Fehlerhaften Boxmodel des IE; FF rechnet korrekterweise den 1px Rahmen zur Breite dazu, IE 6 nicht. Somit ist die linke Box nur 230px breit, die rechte hat aber ein Margin von 232px. Hier müsste ne Browserweiche ran!

//Edit: kommando zurück...muss nochmal nachschauen

[Torsten]

Ich glaube nicht das es mit den Rahmen zu tun hat, die habe ich nur zur Visualisierung des Problemes eingefügt.

Denn auch ohne Rahmen und mit einem korrekten "marign" von 230 Pixeln baut der IE einen Abstand ein.

Siehe hier: http://www.fit-as-well.de/redesign/twoColFixLtHdr.htm

[Boris]

Das ist der 3px Bug des IEs: http://www.perun.net/2004/07/09/3-pixel-abstand/

[Torsten]

Zitat von Boris

Das ist der 3px Bug des IEs: http://www.perun.net/2004/07/09/3-pixel-abstand/

Vielen Dank Boris, bin gerade beim durchstöbern von Ninas IE Buglist darauf gestoßen, das es dieser 3px Bug sein könnte.

Nur kapiere ich nicht ganz was ich in meinem Beispiel aus diesem Muster machen müsste:

#floatbox {
  float: left;
  width: 100px;
  }
 
p {
  margin-left: 110px;
  }
 
/* Hide from IE5-mac. Only IE-win sees this. \*/
 
* html #floatbox {
  margin-right: 10px;
  }
 
* html p {
  height: 1%;
  margin-left: 0;
  }
 
/* End hide from IE5/mac */

Vielleicht hätte jemand mit mehr CSS und Englisch-Erfahrung (als ich sie habe) einen passenden Tipp für mich

[Boris]

Schau bitte selbst noch ein wenig und verstehe, woher das Problem kommt und wie man es dann beseitigen kann - das bringt dir mehr als wenn man es dir jetzt vorkaut

http://www.google.de/search?q=3px+css+ie

[Torsten]

Problem gelöst, Patient tot
Mithilfe dieses Tutorials Die Loesung des 3 Pixel Text-Jog (Bug) im Internet Explorer ist es mir gelungen in meinem Beispiel alles wie gewünscht zu formatieren.

Siehe hier: http://www.fit-as-well.de/redesign/twoColFixLtHdr.htm

Nun gibt es aber noch ein 2. Problem in der Darstellung und zwar:

Wird die Content-Box im IE auf gleicher Höhe wie die Sitebar1-Box dargestellt, so soll es auch sein.
Der FF macht oberhalb der Contentbox einen Abstand, wo kommt nun dieser wieder her?

[mogidala]

Huhu! h1 ist schuld. Wenn du im css h1 margin:0; gibst, dann funktionierts.

Du hast zwar margin und padding im body auf 0 gesetzt, aber schreib besser nochmal * {margin....} dazu.

Ich dachte zwar immer, dass nur im CSS nur formatierungen für html {} nur vom IE wahrgenommen werden, aber scheinbar ist das mit body auch ein Problem.

[Torsten]

Verrückt selbst die Angabe von:

*html {
	margin: 0;
	padding: 0;
	border: 0
}

veranlasst den Firefox nicht dazu den Abstand oben wegzulassen, erst das zusätzliche einfügen von:

h1 {
	margin: 0
}

erziehlt das gewünschte Ergebnis.

Nun gibt es noch am Ende des div id="mainContent" einen Abstand zum Footer ebenfalls nur im Firefox, ich vermute das liegt an diesem:
<br class="clearfloat" /> mit dem CSS:

.clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schließen eines Containers sein, der wiederum einen vollständigen Float enthalten sollte. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

Oder liege ich da falsch?

[Boris]

*html {

Das ist ja auch SO der Sternchen-Hack den nur der IE sehen kann (und soll).

Du musst das html weg lassen, so:

*
{
padding: 0;
margin: 0;
}

[steffenk]

ist das space nicht wichtig oder ist das kein Unterschied?
* html {