Floating and clearing in IE7
Question
Currently I'm trying to implement a HTML 5 site. On one of the pages II have the following HTML structure
<ul class="catList">
<li class="cat rowStart">
<h4>Title</h4>
<p class="shortDesc">Consetetur sadipscing elitr... Consetetur sadipscing elitr... Consetetur sadipscing elitr...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">Sanctus sea sed takimata ut vero voluptua...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
<li class="cat rowEnd">
<h4>Dozer Bags</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum... At vero eos et accusam et justo duo dolores et ea rebum... At vero eos et accusam et justo duo dolores et ea rebum... At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
<li class="cat rowStart">
<h4>Title</h4>
<p class="shortDesc">Consetetur sadipscing elitr... Consetetur sadipscing elitr...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum... Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua...</p>
</li>
<li class="cat rowEnd">
<h4>Dozer Bags</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
<li class="cat rowStart">
<h4>Title</h4>
<p class="shortDesc">Consetetur sadipscing elitr Sanctus sea sed takimata ut vero voluptua... Sanctus sea sed takimata ut vero voluptua...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">Sanctus sea sed takimata ut vero voluptua</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum. At vero eos et accusam et justo duo dolores et ea rebum.</p>
</li>
<li class="cat rowEnd">
<h4>Dozer Bags</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum.</p>
</li>
</ul>
The accompanying CSS is as follows:
.catList {
overflow: hidden;
background: sandybrown;
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
}
.catList li {
float: left;
width: 249px;
margin: 0 1px 1px 0;
background: orchid;
}
.catList li.rowStart {
clear: both;
}
(the colours are obviously just for demonstration purposes :) )
This layout works fine in IE8, and in Chrome, Firefox, Safari and Opera. The .rowStart list items get pushed to the next row, and all the following list items have their tops lining up fine with the first one as intended, regardless of whether all teh list items are the same height or not.
Howevern in IE7, the layout breaks quite badly. The .rowStart list item itself gets cleared as expected, but the following list items don't appear to clear the previous row.
Is this because I'm trying to use HTML5 in IE7 or is there something I'm missing in my CSS?
I'm not worried about IE6 compatibility.
EDIT: Don't know if this is relevant, but I'm basing the HTML on the HTML5 boilerplate, and am using modernizr.js
EDIT 2: Here's the full document structure (ommitting the actual list, as you've seen that already)
<!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
<meta name="language" content="en" >
<title>Title goes here</title>
<link href="/css/html5.css" media="all" rel="stylesheet" type="text/css" >
<link href="/css/core.css" media="all" rel="stylesheet" type="text/css" >
<!--[if lte IE 7]> <link href="/css/ie7.css" media="all" rel="stylesheet" type="text/css" ><![endif]-->
<!--[if lt IE 7]> <script type="text/javascript/" src="/css/iepngfix/iepngfix_tilebg.js"></script><![endif]-->
<script type="text/javascript" src="/js/jquery/core.js"></script>
<script type="text/javascript" src="/js/modernizr-2.5.2.min.js"></script>
</head>
<body>
<div class="siteWrap">
<header>
<p>Header stuff goes here</p>
<nav class="topNav">
<ul class="headerLinks clearfix">
<li><a href="/">Home</a>
<li><a href="/">link 2</a>
<li><a href="/">link 3</a>
<li><a href="/">link 4</a>
<li><a href="/">link 5</a>
</ul>
</nav>
</header>
<div class="main">
<nav class="breadcrumbs">
<p>You are in:</p>
<ul>
<li><a href="/">Home</a></li>
<li>Breadcrumb 1</li>
</ul>
</nav>
<p>Catalogue preamble goes here</p>
<ul class="catList">
<!-- ommitted because it's already in the question -->
</ul>
<p>Catalogue postamble goes here</p>
</div>
<footer>
<p class="copyright"><small>© Copyright Foo Bar 2012</small></p>
<nav class="bottomNav">
<ul class="footerLinks">
<li><a href="#" class="social twitter">Follow on Twitter</a></li>
<li><a href="#" class="social facebook">Follow on Facebook</a></li>
<li><a href="#">Stockists</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
EDIT 3: Updated the list item contents to something more likely to cause IE7 to break
1 answers
solution1
1 ACCPTED 2012-02-17 15:37:33
Edit: removed old superfluous stuff
Option 1, this css worked:
.catList {
overflow: hidden;
background: sandybrown;
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
overflow:auto;
}
.catList li {
min-height:1px;
float: left;
width: 249px;
margin: 0 1px 0px 0;
background: orchid;
min-height:1px;
}
.catList li.rowStart {
clear: both;
}
.catList li.spacer{
font-size:1px;
line-height:1px;
text-height:1px;
height:1px;
margin:0;
padding:0;
width:1000px;
background:#000;
float:none;
clear:both;
}
html:
<ul class="catList">
<li class="cat rowStart">
<h4>Title</h4>
<p class="shortDesc">Consetetur sadipscing elitr...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">Sanctus sea sed takimata ut vero voluptua...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
<li class="cat rowEnd">
<h4>Dozer Bags</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
<li class="spacer"></li>
<li class="cat rowStart">
<h4>Title</h4>
<p class="shortDesc">Consetetur sadipscing elitr...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">Bobilicius Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
<li class="cat rowEnd">
<h4>Dozer Bags</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
<li class="cat rowStart">
<h4>Title</h4>
<p class="shortDesc">Consetetur sadipscing elitr</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">Sanctus sea sed takimata ut vero voluptua</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum.</p>
</li>
<li class="cat rowEnd">
<h4>Dozer Bags</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum.</p>
</li>
</ul>
Option 2: Nested Lists
CSS:
.catList {
background: sandybrown;
margin: 0;
padding: 0;
list-style: none;
width: 1000px;
}
.catList li.catRow li {
float: left;
width: 249px;
margin: 0 1px 1px 0;
background: orchid;
display:inline-block;
}
.catList li.catRow {
float:left;
width:1000px;
clear:left;
min-height:1px;
}
html:
<ul class="catList">
<li class="catRow">
<ul>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">Consetetur sadipscing elitr...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...Sanctus sea sed takimata ut vero voluptua...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
<li class="cat">
<h4>Dozer Bags</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
</ul>
</li>
<li class="catRow">
<ul>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">Consetetur sadipscing elitr...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">Sanctus sea sed takimata ut vero voluptua...</p>
</li>
<li class="cat">
<h4>Title</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
<li class="cat">
<h4>Dozer Bags</h4>
<p class="shortDesc">At vero eos et accusam et justo duo dolores et ea rebum...</p>
</li>
</ul>
</li>
</ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Floating Div in IE7
Floating divs not displayed in IE7
IE7 Floating ULs not displaying
IE7 elements in box not floating right
Floating div expands to 100% in IE7
IE7 versus FF floating issue
IE7 and IE8: Float clearing without adding empty elements
IE6 and IE7 floating bug inside a header
Floating text inside ul with Chrome, IE7 and IE8
Why does IE7 when clearing a float result in a margin bug?
Related Tags