Wo kommt der Abstand her?

[blubbbla]

Ich habe hier 5 Buttons: http://blubbbla.bl.funpic.de/roundcorners/demo2.htm

Die ersten zwei sind normale Divs. Sobald ich das ganze in eine Liste packe (letzten drei Buttons) entsteht unter jedem Buttun ein Abbstand. Ich hab alles auf 0 gesetzt. Also wo kann der Abstand nur herkommen? Wohl bemerkt, wird der Abstand nur im IE angezeigt

 

[Maik]

Hi,

ruf das folgende Stylesheet für den IE im Dokument auf:

buttons_ie.css:

ul.buttons {
        width:150px;
}
ul.buttons li {
        float:left;
}

<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="buttons.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="buttons_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

 

[blubbbla]

Ich könnte auch einfach *margin-bottom-5px dazu schreiben, aber es kann doch nicht sein, dass da ein Abstand ist, wo keiner sein kann. Ich möchte einfach nur wissen, wo der herkommt? Wenn ich mal einen Rahmen um das Listenelement anzeige, ist da auch kein Abstand.

 

[Maik]

Es läuft auf einen der vielen IE-Bugs hinaus, möglicherweise eine Abart des "3px-Gap-Bugs", denn margin-bottom:-5px wäre um 2px zu groß gewählt, da der Abstand drei Pixel beträgt.

Außerdem hätte

ul.buttons li {
	margin:0 0 0 0;
	padding:0;
	width:150px;

	margin-bottom:-5px;
}

zur Folge, dass die Regel für alle Browser gilt, und in den nicht-IE-Browsern die Elemente übereinander geschoben werden.