Works fine in FF but not in IE...

[queerfm]

Hi i need some help live demo http://www.twitoosearch.com (olympic medal tally) I have coded it so it works in Firefox but it is screwing up in IE

here is the CSS

.minibadge{background-image:url(http://www.twitoosearch.com/images/olympics/olympicmedalbg.png); background-repeat: no-repeat; width:270px; float:left; height:380px; padding-bottom:20px;}
.obutton{width:100px; height:20px; font-weight: bold; float:right; color:#000000; padding-right:1em; text-align:center; background-image:url(http://www.twitoosearch.com/images/olympics/glassbuttonblue.png); background-repeat: no-repeat;}
.insideminibadge{width:265px; padding:2.5em 0.5em 0 0.5em; margin-left: auto;
margin-right: auto;}
.gamestitlecountry{
width: 80px;
float: left;
padding: 5px;
vertical-align:top;
}
.gamestitlegold{
width: 25px;
padding: 5px;
text-align:center;
float:left;
vertical-align:top;
}
.gamestitlesilver{
width: 30px;
padding: 5px;
text-align:center;
float:left;
vertical-align:top;
}
.gamestitlebronz{
width: 30px;
padding: 5px;
text-align:center;
float:left;
vertical-align:top;
}
.gamestitletotal{
width: 30px;
padding: 5px;
padding-left:20px;
text-align:center;
float:left;
vertical-align:top;
}


.gamescountry{
width: 80px;
float: left;
padding: 5px;
vertical-align:top;
}
.gamesgold{
width: 25px;
padding: 5px;
text-align:center;
float:left;
vertical-align:top;
}
.gamessilver{
width: 30px;
padding: 5px;
text-align:center;
float:left;
vertical-align:top;
}
.gamesbronz{
width: 30px;
padding: 5px;
text-align:center;
float:left;
vertical-align:top;
}
.gamestotal{
width: 30px;
padding: 5px;
padding-left:20px;
text-align:center;
float:left;
vertical-align:top;
}

here is the HTML

    <div class="minibadge">
    <div class="insideminibadge">
    <div class='gamescountry'>Country</div>  <div class='gamesgold'><img src="http://www.twitoosearch.com/images/olympics/gold.png"/></div>  <div class='gamessilver'><img src="http://www.twitoosearch.com/images/olympics/silver.png"/></div>  <div class='gamesbronz'><img src="http://www.twitoosearch.com/images/olympics/Bronz.png"/></div>  <div class='gamestotal'><b>Total</b></div><br/>
<?php
include '*';
include '*'; 

$news = "SELECT * FROM olympics WHERE `id` ORDER BY `total` DESC limit 10";
$result = mysql_query($news);


while($row = mysql_fetch_array($result))
{
    echo "<div class='gamestitlecountry'>{$row['country']}</div>  <div class='gamestitlegold'>{$row['gold']}</div>  <div class='gamestitlesilver'>{$row['silver']}</div>  <div class='gamestitlebronz'>{$row['bronz']}</div>  <div class='gamestitletotal'><b>{$row['total']}</b></div><br/>";

}

?>
<a href="?p=Olympics"><div class="obutton">Full medal tally</div></a>
</div></div>

If you can help that would be great

Thank you

[Medyman]

The first step in getting even close to getting cross-browser compliant designs is to make sure that your code is valid.

The W3C Validator will point our your coding flaws. This might not fix all of your issues, but it will remove a lot of the variables in making your design appear the same across browsers.

A lot of the validation errors in this case seem to be trivial, but there are some structural issues that you should address.