Lücke zwischen DIVs im IE6

[Sven Jacobs]

Hallo,

ich habe hier zwei DIVs, die nebeneinander liegen. Das link DIV floated links (float:left) und hat eine feste Breite. Das DIV daneben kriegt keinen float gesetzt und hat auch keine feste Breite. Somit breitet es sich auf die gesamte restliche Breite der Seite aus. Das Ganze dient dazu, um einen grafischen Rahmen mit einer Titelzeile zu zeichnen. Das ist nur ein Teil des gesamten Rahmens. Mozilla/Firefox und Opera stellen dies auch wie gewünscht dar, der IE6 macht mal wieder Probleme :-(

Ein Live-Beispiel kann unter http://sven-jacobs.de/files/iesux/beispiel.html betrachtet werden (CSS: http://sven-jacobs.de/files/iesux/beispiel.css). Alle Dateien des Beispiels liegen ebenfalls in dem Archiv http://sven-jacobs.de/files/iesux/beispiel.zip

Der IE fügt einen Abstand von ein paar Pixeln zwischen die DIVs, obwohl ich alle margins und paddings auf 0 gesetzt habe (siehe Grafik unten).

Wie bekomme ich diese Lücke weg? Vielen Dank für jede Hilfe!

[wahsaga]

hi,

Das Ganze dient dazu, um einen grafischen Rahmen mit einer Titelzeile zu zeichnen.

welche grund gibt es, den "langen" teil des rahmen nicht einfach als hintergrundbild einzubinden?

gruß,
wahsaga

[Sven Jacobs]

welche grund gibt es, den "langen" teil des rahmen nicht einfach als hintergrundbild einzubinden?

Ist er doch! Als Hintergrundgrafik des DIVs, oder verstehe ich Dich jetzt falsch? Den Rahmen als Hintergrundgrafik des BODY-Elements zu definieren ist in diesem Fall nicht möglich. Die Grafik soll nicht den Rahmen des gesamten Layouts bilden sondern nur eines Content-Elements, beispielsweise eines News-Eintrags.

[ziegenmelker]

Hallo,

Der IE fügt einen Abstand von ein paar Pixeln zwischen die DIVs, obwohl ich alle margins und paddings auf 0 gesetzt habe (siehe Grafik unten).

hier handelt es sich möglicherweise um den 3 Pixel Fehler des IE, siehe IE Three Pixel Gap.

cu,
ziegenmelker

[Sven Jacobs]

hier handelt es sich möglicherweise um den 3 Pixel Fehler des IE, siehe IE Three Pixel Gap.

Klingt danach! Leider habe ich es bisher nicht geschafft, den CSS-Fix in mein CSS zu integrieren...

[ziegenmelker]

Hallo,

hier handelt es sich möglicherweise um den 3 Pixel Fehler des IE, siehe IE Three Pixel Gap.

Klingt danach! Leider habe ich es bisher nicht geschafft, den CSS-Fix in mein CSS zu integrieren...

du kannst mithilfe einer Browserweiche (da gibt es mehrere Möglichkeiten) spezielle CSS-Eigenschaften nur für den IE festlegen. AFAIK mußt du auch zwischen IE 5.x, IE 6 quirks mode, IE 6 standard mode und IE 5.01(?) MAC unterscheiden. Hier mal ein mögliches Beispiel:

* html <selector>   /* this selector recognized by IE only */
{
  width: <value>;   /* total width (only for IE5.x/Win) */
  w\idth: <value>;  /* content width (for other IE) */
}

<selector>
{
  padding: <value>;
  width: <value>;   /* content width (for other browsers) */
}

selector steht für dein div mit der Linie als Hintergrund.
Ich habe in deine beispiel.css folgende Zeile eingefügt und der IE 6 stellt es dann korrekt dar:

* html div#bsp2 {position:relative;left:-3px;}

Siehe auch hier: http://www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html
und hier http://centricle.com/ref/css/filters/?whitebg

cu,
ziegenmelker

[Sven Jacobs]

Ich habe in deine beispiel.css folgende Zeile eingefügt und der IE 6 stellt es dann korrekt dar:

* html div#bsp2 {position:relative;left:-3px;}

Vielen vielen Dank!! Der IE ist einfach nur sch....