I have a block setup for news stories, it has 3 blocks in a column and 2 in a row. It displays correctly in Firefox, but in IE it just displays in one whole row.
This is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><!-- Insert your title here --></title>
<style type="text/css">
.wrapper2 {
width: 1000px;
outline: 0px solid gray;
text-align: left;
margin: 0 auto;
}
.wrapper3 {
width: 1000px;
outline: 1px;
text-align: center;
margin: -3 auto;
}
.block {
position:relative;
width: 300px;
height: auto;
display: inline-block;
text-align: center;
margin: 0px;
}
.blockH {
background-color: white;
color: white;
height: 40px;
}
.blockImg {
width: 300px;
display: table-cell;
vertical-align: middle;
background-color: white;
height: 219px;
}
.blockF {
background-color: white;
height: 50px;
}
body {
margin-left: 0px;
margin-top: 0px;
}
.wrapper3 {
float; left:auto
}
</style>
</head>
<body alink="">
<div><img name="" src="image" width="1000" height="30" alt="" /></div>
<div align="" class="wrapper3">
<div class="block">
<div class="blockH">
<div align="left"><img name="" src="Header" width="300" height="40" alt="" /></div>
</div>
<div class="blockImg">
<div align="left"><img src="image" width="300" height="219" /></div>
</div>
<div class="blockF">
<div align="left"><font color="#000102" size="3" face="Arial, Helvetica, sans-serif">Description</div>
</div>
<div class="block">
<div class="blockH">
<div align="left"><img name="" src="Header" width="300" height="40" alt="" /></div>
</div>
<div class="blockImg">
<div align="left"><img src="image" width="300" height="219" /></div>
</div>
<div class="blockF">
<div align="left"><font size="3" face="Arial, Helvetica, sans-serif">Description</div>
</div>
<div class="block">
<div class="blockH">
<div align="left"><img name="" src="Header" width="300" height="40" alt="" /></div>
</div>
<div class="blockImg">
<div align="left"><img src="image" width="300" height="219" /></div>
</div>
<div align="left">Description</div>
<div class="blockF"> </div>
</div>
<div class="block">
<div class="blockH">
<div align="left"><img name="" src="Header" width="300" height="40" alt="" /></div>
</div>
<div class="blockImg">
<div align="left"><img src="image" width="300" height="219" /></div>
</div>
<div class="blockF">
<div align="left"><font color="#000000" size="3" face="Arial, Helvetica, sans-serif">Description</font></div>
</div>
</div>
<div class="block">
<div class="blockH">
<div align="left"><img name="" src="Header" width="300" height="40" alt="" /></div>
</div>
<div class="blockImg">
<div align="left"><img src="image" width="300" height="219" /></div>
</div>
<div class="blockF">
<div align="left"><font color="#000000" size="3" face="Arial, Helvetica, sans-serif">Description</font></div>
</div>
</div>
<div class="block">
<div class="blockH">
<div align="left"><img name="" src="header" width="300" height="40" alt="" /></div>
</div>
<div class="blockImg">
<div align="left"><img src="image" width="300" height="219" /></div>
</div>
<div class="blockF">
<div align="left"><font color="#000000" size="3" face="Arial, Helvetica, sans-serif">Description</font></div>
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Thank you!