So here is a simple page I’ve stripped down to the bare minimum. Looks great in FF, but I can’t get it to display the same way in IE. I have tried every configuration possible (I think). Maybe someone could tell me what I’m doing wrong. Could it be the layout? Thx.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>work page</title>
<style type="text/css">
<!--
/* --- --- */
#wrapper {
width:731px;
margin-right: auto;
margin-left: auto;
background-color: #FFFFFF;
}
/* --- --- */
#wholepage {
width: 674px;
display: inline-table;
margin-left: 28px;
}
#prefmatchbox {
width: 600px;
position: relative;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
}
.titlecenter {
padding-top: 2px;
padding-bottom: 3px;
font-size: 15px;
font-weight: bold;
text-transform: capitalize;
text-align: center;
width: 100%;
border: 2px outset #333333;
display: inline-table;
}
.box {
}
.left {
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
display: inline-table;
width: 200px;
margin-left: 25px;
}
.center {
text-transform: capitalize;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
display: inline-table;
width: 150px;
}
.right {
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
display: inline-table;
width: 200px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="wholepage">
<div id="prefmatchbox">
<div class="titlecenter">food</div>
<div class="box">
<div class="left">peaches<br />
</div>
<div class="center">fruit</div>
<div class="right">plums<br />
</div>
</div>
<div class="box">
<div class="left">lettuce<br />
</div>
<div class="center">vege's</div>
<div class="right">carrots<br />
</div>
</div>
<div class="box">
<div class="left">wheat<br />
</div>
<div class="center">bread</div>
<div class="right">white<br />
</div>
</div>
<div class="box">
<div class="left">gum drops<br />
</div>
<div class="center">candy</div>
<div class="right">chocolate<br />
</div>
</div>
<div class="box">
<div class="left">water<br />
</div>
<div class="center">drink</div>
<div class="right">juice<br />
</div>
</div>
<div class="titlecenter">plants</div>
<div class="box">
<div class="left">weed grass<br />
</div>
<div class="center">weeds</div>
<div class="right">some other weed<br />
</div>
</div>
<div class="box">
<div class="left">maple<br />
</div>
<div class="center">tress</div>
<div class="right">fir<br />
</div>
</div>
<div class="box">
<div class="left">Rose bud<br />
flourance<br />
galaxy bloom<br />
</div>
<div class="center">flowers</div>
<div class="right">blah<br />
Rose<br />
Humperdinkle<br />
greedy lane<br />
</div>
</div>
<div class="titlecenter">cars</div>
<div class="box">
<div class="left">porsche<br />
</div>
<div class="center">fast</div>
<div class="right">lamborghini<br />
</div>
</div>
<div class="box">
<div class="left">explorer<br />
</div>
<div class="center">big</div>
<div class="right">suburban<br />
</div>
</div>
<div class="box">
<div class="left">mercedes<br />
</div>
<div class="center">slow</div>
<div class="right">honda<br />
</div>
</div>
<div class="titlecenter">movies</div>
<div class="box">
<div class="left">iron man 2<br />
</div>
<div class="center">action</div>
<div class="right">kick ass<br />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Edited to add a link to a jsbin.com demo on OP’s behalf.
It works fine in IE 8. IE 7 and earlier doesn’t support
display:inline-table.