I'm having some trouble getting the following page to display properly in IE 7. It works fine in IE 8, Mozilla Firefox, and Google Chrome. The only problem is that in IE 7, the width of the unordered list causes the list items to unnecessarily wrap to the next lines. Any help will be very much appreciated.
Oh, also I noticed that by commenting out the two lines below that set the widths of certain elements, the problem with the unordered lists goes away. But then I don't have the web page centered in the middle of the browser, which I need...
Anyway, is there some way to make this display in IE 7 the same way it displays in IE 8?
<!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>
<title></title>
<style type="text/css">
*
{
font-family: Arial, Helvetica, Veranda, sans-serif;
padding: 0px;
margin: 0px;
}
#PageWrapper
{
width: 840px; /* Commenting out these two lines fixes the unordered list. */
margin-right: auto;
margin-left: auto;
font-size: 0.96em;
}
#MainContentWrapper
{
position: relative;
width: 800px; /* Commenting out these two lines fixes the unordered list. */
min-height: 400px;
margin-top: 10px;
margin-bottom: 20px;
padding: 20px;
background-color: White;
line-height: 1.2em;
}
/*
ol, ul
{
padding-left: 1.0em;
margin-left: 1.0em;
}
*/
.CategoryDetailsMCWrapper
{
clear: both;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding-top: 20px;
}
.CategoryDetailsWrapper
{
clear: both;
display: inline-block;
}
.EntryLabel
{
clear: left;
width: 130px;
float: left;
}
.EntryDataItem
{
float: left;
max-width: 570px;
margin-left: 0px;
padding-left: 20px;
border-left: 1px solid #AAAAAA;
}
.EntryRowBottomBorder
{
display: inline-block;
clear: left;
float: left;
border-bottom: 1px solid #AAAAAA;
}
</style>
</head>
<body>
<form method="post">
<div id="PageWrapper">
<div id="MainContentWrapper">
<div class="CategoryDetailsMCWrapper">
<h3>
Heading</h3>
<div class="CategoryDetailsWrapper">
<div class="EntryRowBottomBorder">
<div class="EntryLabel">
List 1:
</div>
<ul class="EntryDataItem">
<li>Different wavelengths of light that allow people to see. </li>
</ul>
</div>
<div class="EntryRowBottomBorder">
<div class="EntryLabel">
List 2:
</div>
<ul class="EntryDataItem">
<li>A rainbow has many colors. </li>
<li>Before movies had color, they were "black and white". </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Many thanks in advance!
Andrew