Amazon Banner 1.6

NEW ! - Kristof Bilder

Unter Bildergallerie Kristof gibt es neue Bilder von unserem Kleinen!

Der Peek-a-boo Bug

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: http://www.positioniseverything.net/explorer/peekaboo.html