Problem with float and IE6 - html

Question

I have problem with floating in IE6. The HTML code:
<div id="stran">
<img src="../Slike/prejsnja.png" alt="Prejšnja" onclick="prejsnja();" onmouseover="this.style.cursor='pointer';" id="prejsnja" />
STRAN <?php dobiStran(); ?>
<img src="../Slike/naslednja.png" alt="Naslednja" onclick="naslednja();" onmouseover="this.style.cursor='pointer';" id="naslednja" />
</div>
CSS:
#prejsnja {
float: left;
}
#naslednja {
float: right;
}
#stran {
position: relative;
width: 400px;
border: 2px black solid;
margin: 0 auto;
font-family: "Comic Sans MS"; /*Izberemo drugo pisavo, kot pa tista ki je definirana v body.*/
color: #599cd4;
text-align: center; /*Postavimo na center.*/
font-size: 30px; /*Vecja pisava, ker gre za naslov.*/
}
The left image floats to the left, as it should, the text is centered, the right image also floats to the right as it should, but has for some reason some kind of margin-top, that only appears in IE6. Here is example in other browsers:
And in IE6:

Answer 1

Try moving your HTML elements around a bit, like this:
<div id="stran">
<img src="../Slike/prejsnja.png" alt="Prejšnja" onclick="prejsnja();" onmouseover="this.style.cursor='pointer';" id="prejsnja" />
<img src="../Slike/naslednja.png" alt="Naslednja" onclick="naslednja();" onmouseover="this.style.cursor='pointer';" id="naslednja" />
STRAN <?php dobiStran(); ?>
</div>
And then your styles become:
#prejsnja {
float: left;
width: 100px;
}
#naslednja {
float: right;
width: 100px;
}
#stran {
position: relative;
width: auto;
border: 2px black solid;
margin: 0 auto;
font-family: "Comic Sans MS"; /*Izberemo drugo pisavo, kot pa tista ki je definirana v body.*/
color: #599cd4;
text-align: center; /*Postavimo na center.*/
font-size: 30px; /*Vecja pisava, ker gre za naslov.*/
}
I've assumed your arrow images are 100px, but just change these to whatever it is they actually are.