Currently I’m trying to implement a HTML 5 site. On one of the pages I I 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
Edit: removed old superfluous stuff
Option 1, this css worked:
html:
Option 2: Nested Lists
CSS:
html: