Unordered List In IE 7
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开发者_StackOverflow中文版 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
it is best practice to give any element you want to float, a width. either in %age or a unit.
One way would be to give the parent containers 100% width. see working example here: http://jsbin.com/uteko3/3
Another would be to redo your layout with %ages for both the labels and the items.
I've used a doctype that ensures best cross browser compatibility. transitional won't.
Can you add a class to the and then set a width and a float direction to it?
Something like:
<ul class="menu>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
.menu {float: left; width: 100px;}
Note: after you make it work on IE make sure you check it on other browsers too.
加载中,请稍侯......
精彩评论