Hi - I have a problem coding for IE7.0 I have floated a box with a floated list inside it.
In all standards browsers it is fine, but in IE the box is wider than it should be. I added a ‘clearfix’ (positioniseverything) class to the box to clear all following boxes.
Without ‘clearfix’ the h2 after the floated list (within the floated box) has a huge amount of vertical space, with clearfix the box is too wide but has correct vertical spacing, what should i do?
Thanks
Steven
Hi,
Any chance we can see a real page as it will be easier to debug. 
Hi Paul thanks for this I tried your suggestion but I still get this error in IE7 - anything else I can try?
Thanks
Steven
Hi, ok here is the code -
HTML
<div class="box2 clearfix">
<img src="images/what-career-thumb.jpg" alt="" width="80" class="right" />
<h2>What area of study interests you?</h2>
<p>Have a look at these subject areas to find starting points for your research into potential career opportunities. Your regional or national centre can advise you on variations in entry and training requirements between England, Northern Ireland, Republic of Ireland, Scotland and Wales.</p>
<ul class="arrows">
<li class="col1 no-arrows"><span>A to E</span>
<ul>
<li><a href="arts-and-humanities.php">Arts and Humanities</a></li>
<li><a href="business-and-management.php">Business and Management</a></li>
<li><a href="childhood-and-youth.php"> Childhood and Youth</a></li>
<li><a href="computing-and-ict.php"> Computing and ICT </a> </li>
<li><a href="education.php"> Education </a></li>
<li><a href="engineering-and-technology.php"> Engineering and Technology </a> </li>
<li><a href="environment-development-and-international-studies.php"> Environment, Development and International Studies </a></li>
</ul>
</li>
<li class="col2 no-arrows"><span>H to S</span>
<ul>
<li><a href="health-and-social-care.php"> Health and Social Care </a></li>
<li><a href="languages.php"> Languages </a></li>
<li><a href="law.php"> Law </a></li>
<li><a href="maths-and-stats.php"> Mathematics and Statistics </a></li>
<li><a href="psychology.php"> Psychology </a></li>
<li><a href="science.php"> Science </a></li>
<li><a href="social-science.php"> Social Sciences </a></li>
</ul>
</li>
</ul>
<h3 class="clear">The Open Programme</h3>
<p>Students who graduate from <a href="open-programme.php">The Open Programme</a> are able to choose from a wide range of careers, including many of those listed above, depending on what subjects they have studied.</p>
</div>
CSS
screen-styles.css
/* BULLET LISTS
-------------------------------------------- */
div.box2 {padding:1.5em; margin:0 0 1.5em 0; background-color: #e0efff; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border:2px solid #CCE5FF;}
ul {margin: 1em 0; padding: 0 0 0 1.5em;}
ul li {background-image: url(icon-dot.gif); background-repeat: no-repeat; background-position: 0 .5em; list-style: none; padding-left: 17px;}
ul.arrows {
list-style: none;
margin:1em 0;
padding:0 0 0 1.5em;
}
ul.arrows li {
background: url(bullet-arrow.gif) 0 .5em no-repeat;
padding-left: 1.5em;
}
ul.arrows ul {margin-left: 0; padding-left: 0;}
ul.arrows ul li {list-style: none;}
.clearfix {
float:left;
height:auto;
margin:0 0 1em;
padding:0;
}
.clearfix:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
div.box2 ul:last-child {margin-bottom: 0;}
div.box2 h2,
div.box2 h3 {margin:0 0 .5em 0;}
<style type="text/css" media="screen">
ul.arrows li {
border:1px solid white;
}
h3.clear {
clear:left;
padding-top:1em;
margin:0;
}
ul.arrows li.col1 {
float:left;
}
ul.arrows li.col2 {
float:left;
}
ul.arrows li span{
display:none;
}
ul.arrows li.no-arrows {
background-image:none;
}
</style>
Hi,
The width looked much the same to me but the extra heights is coming from IEs bad handling of margins. It will often transfer margins from elements above a float onto the element below the float such as your cleared h3.
If you change the margins a bit and use padding in critical places then it looks much the same in all browsers.
E.G.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body, h1, h2, h3 {
line-height:1.2
}
div.box2 {
padding:1.5em;
background-color: #e0efff;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border:2px solid #CCE5FF;
}
ul.arrows li {
background-image: url(icon-dot.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
list-style: none;
padding-left: 17px;
}
ul.arrows {
list-style: none;
padding:0 0 0 1.5em;
margin: 0;
}
ul.arrows li {
background: url(bullet-arrow.gif) 0 .5em no-repeat;
padding-left: 1.5em;
}
ul.arrows ul {
margin: 0;
padding:1em 0;
}
ul.arrows ul li {
list-style: none;
}
.clearfix {
float:left;
height:auto;
margin:0 0 1em;
padding:0;
}
.clearfix:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
div.box2 ul:last-child {
margin-bottom: 0;
}
div.box2 h2, div.box2 h3 {
margin:0 0 .5em
}
ul.arrows li {
border:1px solid white;
}
ul.arrows li.col1 {
float:left;
}
ul.arrows li.col2 {
float:left;
}
ul.arrows li span {
display:none;
}
ul.arrows li.no-arrows {
background-image:none;
}
h3.clear {
clear:left;
padding-top:1em;
margin:0;
width:100%;
}
ul.arrows, ul.arrows ul {
margin-bottom:0
}
p {
margin:0 0 1em;
}
p.top {
margin:0;
padding:0 0 1em;
}
</style>
</head>
<body>
<div class="box2 clearfix">
<h2>What area of study interests you?</h2>
<p class="top">Have a look at these subject areas to find starting points for your research into potential career opportunities. Your regional or national centre can advise you on variations in entry and training requirements between England, Northern Ireland, Republic of Ireland, Scotland and Wales.</p>
<ul class="arrows">
<li class="col1 no-arrows"><span>A to E</span>
<ul>
<li><a href="arts-and-humanities.php">Arts and Humanities</a></li>
<li><a href="business-and-management.php">Business and Management</a></li>
<li><a href="childhood-and-youth.php"> Childhood and Youth</a></li>
<li><a href="computing-and-ict.php"> Computing and ICT </a> </li>
<li><a href="education.php"> Education </a></li>
<li><a href="engineering-and-technology.php"> Engineering and Technology </a> </li>
<li><a href="environment-development-and-international-studies.php"> Environment, Development and International Studies </a></li>
</ul>
</li>
<li class="col2 no-arrows"><span>H to S</span>
<ul>
<li><a href="health-and-social-care.php"> Health and Social Care </a></li>
<li><a href="languages.php"> Languages </a></li>
<li><a href="law.php"> Law </a></li>
<li><a href="maths-and-stats.php"> Mathematics and Statistics </a></li>
<li><a href="psychology.php"> Psychology </a></li>
<li><a href="science.php"> Science </a></li>
<li><a href="social-science.php"> Social Sciences </a></li>
</ul>
</li>
</ul>
<h3 class="clear">The Open Programme</h3>
<p>Students who graduate from <a href="open-programme.php">The Open Programme</a> are able to choose from a wide range of careers, including many of those listed above, depending on what subjects they have studied.</p>
</div>
</body>
</html>
Adding the clearfix to .box2 has the effect of giving the element haslayout in IE and then it starts working properly. Elements without haslayout do not take care of their children properly (see haslayout in the CSS faq).
what should i do?
Show us the code.
Give us a link to the page or make a test case and post it here.