Kategorien
Stylesheets Webentwicklung

Der lustige Peek-a-boo Bug

CSS Programming Image

Entsteht bei einem variablen Container in der Breite mit einer Box darin bei der z.B. float:left gesetzt ist. Der die innere Box umfliessende Content ist einfach nicht sichtbar. Du kannst die Seite sooft reloaden wie du willst… Ein scrollen (wenn möglich) der Seite lässt den Text hervortreten. Hier mal kurz die Syntax in Kurzform

#aussenContainer
{
background:#FF0000;
border:1px dotted #000000;
margin:1em 15% 1em 13%;
font-size:1em;
}

#innenContainer
{
float:left;
border:1px
solid #00FF00;
padding:10px;
width :130px;
height:130px;
font-size:1.5em;
text-align:center;
}

#clear
{
clear:both;
border:1px
dashed #0000FF;
text-align:center;
}
...

<div id="aussenContainer">;
<div id="innenContainer">;
...
<div>
<div id="clear">;
<div>;
<div>; ... ;
<div>;

Dieser Effekt tritt in sehr verschiedenen Zusammenhängen auf, so dass es mitunter schwer ist diesen Bug zu erkennen.

Erste Möglichkeit dies zu beheben wäre, den ClearStyle von der inneren Box zu entfernen. Die Innere Box mit einem Background zu belegen hilft auch – ist aber nicht so toll.

Zweite Möglichkeit dies zu beheben wäre, dem aussenContainer eine feste Breite und Höhe zu geben.

Dritte Möglichkeit dies zu beheben wäre, dem aussenContainer und dem innenContainer position:relative zu geben – Zieht allerdings umfangreiches Testen nach sich.

Ganz witzig und relative einfach ist die vierte mir bekannte Möglichkeit, dem aussenContainer die Eigenschaft line-height zu geben. Muss man evtl. wieder zurücksetzen – aber funktioniert.

#aussenContainer
{
background:#FF0000;
border:1px dotted #000000;
margin:1em 15% 1em 13%;
font-size:1em;
line-height:1em;
}

Weitere Infos: https://www.positioniseverything.net/category/coding/css

Von Michael

wohnhaft in München
arbeite bei der Landeshauptstadt München

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert