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 (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.twitoosearch.com%2F) 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.