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
Vollansicht: Abstand zwischen Floats
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML
ZITAT(Andreas @ 16.07.2006 - 14:55) 
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;
}
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
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.
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.
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
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
ZITAT(Conny @ 16.07.2006 - 18:45)
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*
Also,
jetzt geht es doch!
Zumindest kann ich keine Unterschiede mehr feststellen.
IE 6 und Firefox 1.06
Conny
jetzt geht es doch!
Zumindest kann ich keine Unterschiede mehr feststellen.
IE 6 und Firefox 1.06
Conny
ZITAT(Conny @ 16.07.2006 - 19:02)
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
ZITAT(Andreas @ 16.07.2006 - 21:23)
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
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). :-(
ZITAT(Andreas @ 16.07.2006 - 21:23)
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>
<!-- 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>
<!-- 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
Vielen Dank, Auge!
Das hat mich auf den richtigen Weg gebracht. Die ID "content" hatte ich verpennt :-o
mit
Gruß
Andreas
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!/* 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 */
Gruß
Andreas
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.