Div float różnice między FF a IE

[treker]

Witajcie, siedzę już nad tym kilka godzin i nie mogę rozwiązać pewnego problemu, żeby nie komplikować opisu sprawy daję prosty przykład:
- mamy diva:

Kod:

<div style="height: 200px; width: 200px; background-color: red; padding:0; margin 0;">

</div>

Wkładam do niego dwa obrazki np aby zokrąglić rogi

Kod:

<img src="lewy_top.png" style="padding:0; margin:0; width:5px; height:31px; float:left;"/>
<img src="prawy_top.png" style="padding:0; margin:0; width:5px; height:31px; float:right;"/>

Więc mamy:

Kod:

<div style="height: 200px; width: 200px; background-color: red; padding:0; margin 0;">
<img src="lewy_top.png" style="padding:0; margin:0; width:5px; height:31px; float:left;"/>
<img src="prawy_top.png" style="padding:0; margin:0; width:5px; height:31px; float:right;"/>
</div>

No i działa pięknie,,, ale w FF w IE te obrazki już nie przylegają do krawędzi, są jakieś dziwne odstępy. Wszystkie marginesy, bordery, paddingi wyzerowane. Efekty widać w załącznikach.

Zauważyłem, że niechciany odstęp w IE znika gdy usuniemy float, ale wiadomo, że usunąć nie mogę bo wtedy nie będę miał prawego rogu zaokrąglonego.