Unerwünschter horizontaler 4px Abstand zwischen zwei Artikeln

Hi,

ich habe einen Artikel links und einen rechts, jeweils mit CSS formatiert. Zwischen den beiden gibt es einen vier Pixel breiten Abstand, für den ich keine Ursache finde. Ist das ein bekanntes Problem?

Gruß, Infidel

Ein Link wäre hilfreich...meine Glaskugel hat spontan keine Lösung parat ;-)

Klingt für mich vielleicht nach einer falschen Größenberechnung für die Floatelemente oder ein verstecktes Padding. Ohne mehr Infos wird dir da aber keiner helfen können.

Ich habe das jetzt auf einer zweiten Seite nachgebaut, einfach zwei Artikeln ID`s gegeben und sie neben einander gesetzt. Wieder 4 Pixel Abstand.

HTML-Code:

---

<div id="main">
<div class="inside">
<div class="mod_article block" id="linkes">
<div class="ce_text block">
<p>links</p>
</div>

</div>
<div class="mod_article block" id="rechtes">
<div class="ce_text block">
<p>rechts</p>
</div>
...

---

HTML-Code:

---

#linkes{width:200px;height:200px;position:relative;display:inline-block;margin-left:0;vertical-align:top;background-color:#f7b5b5}
#rechtes{width:200px;height:200px;position:relative;display:inline-block;margin-left:0;vertical-align:top;background-color:#89c1f5}

---

Habe alle Klassen wie inline, mod_article, ce_text und sogar p auf Margin 0 gesetzt (und getestet, ob die Klassen überhaupt reagieren). Kein Ergebnis, der Abstand bleibt.

?

Kann man das live sehen? Wäre praktisch für Firebug.

Vielleicht hat der umschließende Container eine andere Breite als 2 x 200px. Alles Andere ist aktuell nur raten ;)

Man könnte beiden Elementen mal

Code:

---

margin:0 !important;
padding:0 !important;

---

geben. Aber ich glaube eher das es am umschließenden Element liegt.

Hi,

Firebug habe ich auch... hier habe ich es in einer Testumgebung nachgebaut:

http://gartenpflege-hattingen.de/test2.html

Muss jetzt mal eben meine Tochter aus der KiTa holen :).

Code:

---

#linkes{float:left;}

---

entfernt den Abstand.

display:inline-block kann dann eigentlich raus. Platzierung erfolgt über das floating.

Edit:
Die Ursache für den Abstand ist wohl ein Problem mit einem Whitespace und inline-block.

Abstand

HTML-Code:

---

...
<p>links</p>
</div></div>
<div id="rechtes" class="mod_article block">
...

---

Kein Abstand:

HTML-Code:

---

....
<p>links</p>
</div></div><div id="rechtes" class="mod_article block">
....

---

Verwende dennoch das floating. Ist besser.

Hi Kahmoon,

super, danke, dass du drüber geguckt hast. Gibt es eine Möglichkeit, den Whitespace weg zu bekommen? Über fe_page oder so? Denn float möchte ich ungern benutzen, falls es sich umgehen lässt.

Komisch, würde den Fehler ad-hoc auch nicht finden,

würde dir zwar auch zum float raten, habs aber grad auch so hinbekommen

Code:

---

#rechtes{
  margin-left: -4px;
}

---

Dann ist der Abstand auch weg

Jepp, aber das ist erstens unsauber und zweitens nicht IE kompatibel (hatte das schon getestet ;)).

Na dann machs mit dem float. Was spricht dagegen.

IE? Was ist das? ;-)

Ja, mit float klappt´s jedenfalls. Danke nochmal - den Whitespace hätte ich lange gesucht (obwohl ich sowas an anderer Stelle auch schon mal hatte).

Und was den IE angeht: Noch 17.5 % laut Browsercheck. Auf meinen Seiten teilweise sogar noch bis über 30% Anteil. Für einen solchen Kundengewinn würden einige Menschen schlimme Dinge tun... :).

Nornale Floatings sind auch im IE kein Problem und imho die saubere Lösung. Erst bei Paddings wirds im IE problematischer ;)

Floatings dürften wohl eher eine Krücke, als eine saubere Lösung sein, da die Ursache im html der Browser zu finden ist.
Also kaschiert, aber nicht behoben.

Siehe hier:

http://www.alsacreations.com/astuce/...esirables.html

und hier:

http://css-tricks.com/fighting-the-s...lock-elements/

Gruß Jo

Ich sehe floats nicht als Krücke. Du kannst für sowas auch ein Grid-System benutzen und die bauen auch auf floats.

display: table-cell; wäre auch noch ne Möglichkeit.

Inline-Elemente werden halt mehr oder weniger wie Text behandelt und da gibt es Abstände zwischen den Buchstaben. inline-block hat nur den Vorteil, dass du dem Element eine Breite und Höhe geben kannst, was bei inline-Elementen nicht geht. Für pixelgenaues Arbeiten würde ich also kein inline oder inline-block verwenden.

Diese HTML-Quellcode-Tricks http://css-tricks.com/fighting-the-s...lock-elements/ halte ich für unsauber, da die Browser eigentlich nicht auf die Anordnung des Quelltextes eingehen sollten außer in Elementen, die mit white-space:pre; usw. formatiert sind wie z.B. PRE-Tags. Mit diesen Tricks weißt du nie, wie die versch. Browser das nun darstellen.

Interessante Diskussion

Hallo Andreas,

na da hast Du Dir ja von den vielen Möglichkeiten die herausgegriffen, die mit Contao überhaupt nicht realistisch ist.
Den Link zu css-tricks hab ich angegeben, um ein paar Meinungen zu den verschiedenen Möglichkeiten zu sehen.
Die unteschiedlichen Möglichkeiten darauf zu reagieren, sind auf der franz. Seite dann gut und übersichtlich dargestellt.

Prinzipiell ist es für die meisten sicher kein Problem und sie bemerken es auch garnicht, weil, wie Du schon erwähnt hast,
viele Grid-Systeme auf Floats aufbauen. Man floatet es halt weg. Da ist die Ursache aber immer noch.
Oder: It´s not a bug, it´s a feature ... ?

Im Prinzip ging es mir aber darum, dass die verschiedenen Browser unterschiedlich auf Textumbrüche im Quellcode reagieren
und eben diesen besagten 4 px Abstand zwischen Elementen produzieren. Ist man sich darüber nicht bewusst, kann
man schon ganz schön an sich zweifeln und stundenland die Ursache an der falschen Stelle suchen, oder man resigniert
und covert das ganze mit css bis es passt.

Es ging mir überhaubt nicht um Floats oder diese einzusetzen und auch nicht um Gridsysteme.
Wer Floats mag soll sie einsetzen und damit glücklich werden.

Allerdings bin ich der Ansicht, dass diese Krücken, wie ich es salop bezeichnet habe, Code nach sich ziehen, mit dem
man an einer späteren Stelle dann u. U. wieder klar kommen mus (z. B. Floats wieder auflösen). Im Endeffekt codet
man ab einem bestimmten Umfang für den Code, den man an anderer Stelle in die Welt gesetzt hat und bläht das
Ganze nicht nur auf, sondern macht es auch schwer handhabbar für die Fehlersuche.

Bei mir war es jedenfalls so, als vor einiger Zeit der Wusch bestand, ein responsives, pixelgenaues Grid-System ohne
Floats und absoluter Positionierung, auf Basis von inline-blocks zu verwenden, um eine möglichst große Flexibilität
bei der Positionierung zu haben (Grid im Grid, Grid außerhalb vom Grid, Wechsel der Elementreihenfolge, Silent Classes, ...).

Gruß Jo

Zitat:

---

Zitat von Andreas

Ich sehe floats nicht als Krücke. Du kannst für sowas auch ein Grid-System benutzen und die bauen auch auf floats.

---

Nicht alle.
inuit.css von Harry Roberts hat da ein nettes Grid-System eingebaut.
http://csswizardry.com/2013/02/intro...izardry-grids/

Den Abstand mit inline-Block bekommt man in Contao nur weg wenn man das HTML-Markup in den Einstellungen komprimieren lässt.

In anderen Andwendungen sind auch Dinge wie z.B.:

HTML-Code:

---

<ul><!--
--><li></li><!--
--><li></li><!--
--></ul>

---

oder

HTML-Code:

---

<ul
  ><li
  ><li
></ul>

---

möglich. In Contao auch, aber HTML-Komprimierung ist einfacher.

Yes, genau das csswizardry von Harry Roberts verwenden wir auch.
Lässt sich perfekt und schnell in Contao integrieren.
Ganz davon abgesehen, dass es einfach ein Genuss ist, durch
die Texte von Harry Roberts zu schmökern.

Die 4px werden bei inline-block-elementen erzeugt, die im Markup einen Line Break hinter sich haben, siehe Beispiel über mir.

Also wenn im Markup

HTML-Code:

---

<li>foo</li><li>bar</li>

---

steht, wird kein margin erzeugt. Steht allerdings

HTML-Code:

---

<li>foo</li>
<li>bar</li>

---

im Markup, wird dieser wiederum erzeugt.

Code:

---

<li>foo</li> <li>bar</li>

---

So wird der Abstand auch erzeugt.