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

[Auge]

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 :-/

Zuerst habe ich, ohne die Seite aufgerufen zu haben, an den "three pixel text jog" gedacht, aber der Abstand betrifft ja #block_links und #block_right. Könnte aber trotzdem damit zu tun haben.
Allerdings habe ich im CSS keine padding- und margin-Angaben für diese und das Element #block_mitte gefunden. Also nix mit "schon komplett auf 0 gesetzt".

QUELLTEXT

#block_links {
background: red;
width: 200px;
height: 250px;
float: left;
}

#block_rechts {
background: green;
width: 200px;
height: 250px;
float: right;
}

#block_mitte {
background: silver;
height: 400px;
overflow: auto;
}

*btw* Sind die Pipes "|" zwischen <ul> und <li> bzw. zwischen den <li>s überhaupt zulässig? Ich würde das mit li:after { content:"|"; } machen, auch wenn ich weiß, dass genau dieses Vorgehen vom MSIE vereitelt wird.

Nachtrag: Das Element #content soll genau so breit sein, wie das Element #menu_oben (Breite des Viewports mit margin-left und margin-right von 200px, also Breite des Viewports -400px)? Dann schaue mal genauer hin. Im MSIE ist #content etwas schmaler. Um es genau zu sagen, auf jeder Seite um 3 Pixel schmaler.

Also doch der oben genannte MSIE-Bug.

Tschö, Auge

Der Beitrag wurde von Auge bearbeitet: 16.07.2006 - 17:25

[Andreas]

Hm, den 3-Pixel-Bug hatte ich auch in Verdacht, aber alle Workarounds, die ich gefunden habe, haben nicht so richtig was gebracht. block_mitte hatte ich natürlich auch schon mit margin und padding auf 0 gesetzt Bin ja am Testen.

Die "|" gehören da natürlich nicht hin ... ist erstmal nur beim Grobentwurf. Da baue ich noch was anderes hin.

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.

[Conny]

Hi,
Du hast im 'conten_rahmen' hinter dem letzten '0 px' von 'padding' einen Doppelpunkt statt Punktkomma....

#content_rahmen {
background: yellow;
margin: 5px 0px 0px 0px;
padding: 0px 0px 0px 0px:<---
height: 400px;
}


cu
Conny

[Andreas]

Du hast im 'conten_rahmen' hinter dem letzten '0 px' von 'padding' einen Doppelpunkt statt Punktkomma....

Danke! :-)

Aber leider war das nicht von Erfolg gekrönt :-/ Habe jetzt erstmal getrickst ... muß morgen ja was zeigen können *g*

[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

[Google Bot]