CODEWITHSUNDEEP
htmlcssinternet-explorer-6
Jernej Jerin
Jernej Jerin

Reputation: 3399

Problem with float and IE6

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:

alt text

And in IE6:

alt text

Upvotes: 2

Views: 143

Answers (1)

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

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.

Upvotes: 3

Related Questions