Div placement off in IE8 - css

Question

I know this fiddle isn't that great as It looks a little messy because I haven't included all of my code but you can get the general idea:
Fiddle
It works fine in FF and Chrome, but in IE8 the main chunk of text and the 3 divs underneath get all messed up and over-lap the menu on the left.
Is it something to do with position:relative that I need to include somewhere?
Something that I need to include to stop the divs over lapping?
Is there anyone that can check the fiddle in higher IE as I only have 8

Answer 1

I've managed to clean up the HTML and CSS a little but there are more changes you should consider making before moving forwards. I would definitely look at removing the duplication in the CSS, there are many duplicate properties which can be combined into a single property for multiple selectors. You should also make sure you are writing valid HTML, since this can also cause rendering problems across browsers.
See demo or example code below.
HTML
<div class="allinfo">
<div class="menu">
<div class="menutop">WATCHGUARD SHOP MENU</div>
<ul class="menuoptions">
<li><span class="redtext">WatchGuard Home</span>
</li>
<li>XTM Series Firewalls</li>
<li>XCS Series Firewalls</li>
<li>SSL VPN Encryption</li>
<li>Security In Education</li>
<li>Wireless Access Points</li>
<li>FREE Quotation</li>
</ul>
<div class="tradein">TRADE IN</div>
<div class="tradeininfo">
<strong>Trade Up</strong>
<p>Trade in an earlier generation WatchGuard appliance or any approved non-WatchGuard appliance-based security solution, and trade up to eligible new WatchGuard solutions at 25% off the standard purchase price.</p>
</div>
<div class="whitepapers">WHITEPAPERS</div>
<div class="whitepapersinfo">
<ul>
<li>Take Back Control</li>
<li>Data Loss Prevention</li>
<li>Securing the Virtual World</li>
</ul>
</div>
</div>
<div class="maintext">
<h5>Welcome To The WatchGuard Homepage</h5>
<br/>
<p>WatchGuard builds affordable, all-in-one network and content security solutions to provide defense in depth for corporate content, networks and the businesses they power.</p>
<p>WatchGuard's award-winning extensible threat management (XTM) network security solutions combine firewall, VPN and security services to protect networks from spam, viruses, malware and intrusions.</p>
<p>The new Extensible Content Security (XCS) appliances offer content security across e-mail and web combined with data loss prevention for complete content protection.</p>
<p>WatchGuard extensible solutions scale to offer right-sized security for small businesses up to enterprises with 10,000+ employees.</p>
<p>Since our founding in 1996, more than 600,000 WatchGuard signature red security appliances have been deployed worldwide. Today more than 15,000 dedicated partners back our products in 120 countries.</p>
<div class="products">
<div class="product"> <span>WatchGuard SSL/VPN</span>
<br/>
<br/>
<br/>
<img src="images/watchguard-tb-ssl.jpg" width="199" />
<br/>
<br/>
<p>Remote connectivity. Secure remote access that just works.</p>
</div>
<div class="product"> <span>WatchGuard XCS</span>
<br/>
<br/>
<br/>
<img src="images/watchguard-tb-xcs.jpg" width="117" height="72" />
<br/>
<br/>
<p>Content security. Defense in-depth email security and web security.</p>
</div>
<div class="product"> <span>WatchGuard XTM</span>
<br/>
<br/>
<br/>
<img src="images/watchguard-tb-xtm.jpg" width="122" height="72" />
<br/>
<br/>
<p>Multi-function firewalls. Incredible speed. Unbelievable value.</p>
</div>
</div>
</div>
</div>
CSS
.redtext {
color:#DF0005;
}
.banner {
position:relative;
top:10px;
}
.menu, .maintext {
display:table-cell;
padding:10px;
}
.maintext {
height:500px;
font-size:smaller;
font-weight:normal;
vertical-align:top;
margin-left:240px;
}
.maintext h5 {
font-weight:lighter;
}
.menu {
position:relative;
width:235px;
}
.menutop {
height:30px;
background-color:rgb(221, 221, 221);
color:#666;
line-height:30px;
font-weight:bold;
border-style:solid;
border-width:1px;
border-color:#CCC;
text-indent:10px;
font-size:smaller;
}
.menuoptions {
color:#666;
line-height:30px;
font-weight:bold;
list-style:none;
padding: 0;
font-size:smaller;
}
.menuoptions li {
border-bottom:solid 1px #ccc;
padding-left:10px;
}
.tradein {
background-color:rgb(221, 221, 221);
color:#666;
line-height:30px;
font-weight:bold;
border-style:solid;
border-width:1px;
border-color:#CCC;
text-indent:10px;
font-size:smaller;
}
.tradeininfo {
color:#333;
border-style:solid;
border-width:1px;
border-color:#CCC;
padding:10px;
font-size:smaller;
}
.whitepapers {
background-color:rgb(221, 221, 221);
color:#666;
line-height:30px;
font-weight:bold;
border-style:solid;
border-width:1px;
border-color:#CCC;
text-indent:10px;
font-size:smaller;
}
.whitepapersinfo {
color:#666;
border-style:solid;
border-width:1px;
border-color:#CCC;
line-height:30px;
font-weight:bold;
font-size:smaller;
}
.whitepapersinfo li:not(:last-child) {
border-bottom:solid 1px #ccc;
}
.product {
position:relative;
width:205px;
height:205px;
border-style:solid;
border-width:1px;
border-color:#CCC;
margin:5px;
padding:10px;
text-align:center;
display:inline-block;
vertical-align:top;
}
.product span {
position:relative;
font-size:18px;
margin:0 auto;
color:#333333;
}
.product p {
text-align:left;
font-size:smaller;
color:#333333;
}