Abstand zwischen Floats Einstellungen

[Andreas]

Hi,

ich bastel zur Zeit an einem Layout und bekomme aus irgendeinem Grund einen ca. 2 Pixel breiten Abstand zwischen 3 Floats nicht weg. Kann man hier bewundern (die Farben und Rahmen sind nur zur Illustration der jeweiligen Boxen): http://web209.can12.de/spa30/home.php

Im gelben Bereich floatet links die rote Box, rechts die grüne Box und die Mitte wird von der grauen Box gefüllt. Der Firefox ordnet das alles nahtlos aneinander, der IE (sowohl 6 als auch 7) macht diesen putzigen Abstand - und ich weiß nicht warum. Paddings und Margins habe ich schon komplett auf 0 gesetzt :-/

Gruß

Andreas

[Conny]

Also,
jetzt geht es doch!

Zumindest kann ich keine Unterschiede mehr feststellen.
IE 6 und Firefox 1.06

Conny

[Andreas]

jetzt geht es doch!

Ich sag' ja: getrickst

Ich habe dem content_rahmen einfach einen 250px hohen grauen Hintergrund gegeben. Eigentlich nicht im Sinne des Erfinders :-/

Aber dafür sieht es jetzt exakt so aus wie auf dem Entwurfs-PDF

[Auge]

Ich habe dem content_rahmen einfach einen 250px hohen grauen Hintergrund gegeben. Eigentlich nicht im Sinne des Erfinders :-/

Aber dafür sieht es jetzt exakt so aus wie auf dem Entwurfs-PDF

Dafür ist der Contentbereich bei mir jetzt auf jeder Seite 3 Px breiter, als die darüberliegende Navigation (Mozilla 1.7.12). :-(

Ich suche dann mal weiter in Richtung 3-Pixel ... wahrscheinlich ist es das ja doch :-( Es wundert mich nur, dass es den ganzen Container betrifft. Bisher schien mir das immer nur auf den Fließtext zuzutreffen ... so wie hier http://www.perun.net/2004/07/09/3-pixel-abstand/ beschrieben.

Deswegen war ich mir anfangs auch nicht sicher, ob es das ist. Meine Vermutung geht dahin, dass sich der Bug auf die Elemente innerhalb des neben dem gefloateten Element stehenden Elements bezieht, die sich nur eine Ebene unter dem Hauptelement befinden.

... hmm, ob das so jemand versteht?

Normalfall, vergleichbar der Beschreibung auf perun.net:

QUELLTEXT

<div id="gefloated">
<!-- Inhalt des gefloateten Elements -->
</div>
<div id="neben-dem-gefloateten-Element">
<h1>Überschrift</h1>
<p>viiiieeeeelll Inhalt</p>
</div>

Sowohl <h1> als auch <p> liegen einer Ebene unterhalb #neben-dem-gefloateten-Element und sind vom "3 pixel text jog" betroffen.

deine Struktur:

QUELLTEXT

<div id="block_links">
  <!-- Inhalt des gefloateten Elements -->
  </div>
  <div id="block_mitte">
<div id="content">
  <h1>Überschrift</h1>
  <p>viiiieeeeelll Inhalt</p>
</div>
  </div>

Somit ist #content das erste Element unterhalb von #block_mitte und wird vollständig mit dem Bug belegt.

Tschö, Auge

[Andreas]

Vielen Dank, Auge!

Das hat mich auf den richtigen Weg gebracht. Die ID "content" hatte ich verpennt :-o

mit

HTML

/* Hack um den 3Pixel Bug zu umgehen! */
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html #block_links {
margin-right: -3px;
}
* html #block_rechts {
margin-left: -3px;
}
/* End hide from IE5/mac */

klappt es jetzt so, wie ich mir das vorstelle! Ganz ohne doofes Hintergrundbild. Wieder 10KB gespart!

Gruß

Andreas