Markierung geht über die Seite hinaus

[JoRu1407]

Hallo liebe Contao-Community,

ich momentan dabei, folgende Website zu erstellen: www.j-rupp.net

Wenn ich nun dort teile des Textes unter der grünen Überschrift markiere,
so geht diese Markierung nicht nur über die Breite des DIVs, in dem sich der text befindet,
sondern auch darüber hinaus über die gesamte Breite.

Problem Markierung.jpg

Woran kann das liegen bzw. wie behebe ich das?

Schon mal vielen Dank vorab,
JoRu1407

[jubel]

Ich wollte das Problem gerade nachvollziehen, bei mir sieht's aber richtig aus:
markierung.jpg
In welchem Browser taucht denn dein Problem auf (ich bin im FF13)?

[JoRu1407]

Ich benutze Chrome.
Habe das ganze gerade mal im Internet Explorer ausprobiert, und auch da funktioniert alles einwandfrei.

Mals schauen, was ich da mit Chrome mache...

[jubel]

Hab eben mal meine Browsersamlung durchgetestet: Das Problem tritt im Chrome und im Safari auf (also beides Webkit).

Eventuell hängt es damit zusammen:

* {
padding: 0;
}

Ich kann mich dunkel erinnern, dass damit nicht alle Browser klarkommen, kann mich aber irren.

[JoRu1407]

Daran liegt es leider nicht - Ich habs gerade ausprobiert...
Hat noch jemand eine Idee?

[plastiko]

Die Hervorhebung des markierten Text ist im webkit so breit wie sein BFC.
Contao hält dafür die Klasse block bereit. Ihr wird normalerweise overflow:hidden; gegeben um ein BFC zu schaffen. Das ist bei dir nicht so, vielleicht aus gutem Grund.

Ich würde diese kleine Macke ignorieren, Chrome-Benutzer sind dieses Verhalten von anderen Webseiten gewohnt.

[JoRu1407]

Hallo plastico,

ich verwende zwar nicht das standardmäßige Contao-Framework,
allerdings benutze ich overflow:hidden aus gutem Grund nicht: Das Logo in der Kopfzeile ragt über die eigentliche Seite hinaus.

[plastiko]

#logo ist kein Kind von .block. overflow: hidden; für .block würde #logo nicht abschneiden.

Es gibt aber auch andere Möglichkeiten einen BFC zu schaffen.
Z.B float für #header .inside:

/* bfc für #header .inside */
#header .inside {
float: left;
width: 100%;
}

/* float einschließen */
#header:after {
  content: ".";
  display: block;
  clear: both;
  font-size: 0; 
  height: 0;
  visibility: hidden;
}

Die Markierung sollte dann nur noch so breit sein wie #header .inside.