I know this is a common problem, and is well documented on a number of sites, but each time I run into this problem I seem to forget the best method for narrowing down where the problem is coming from.

First, the problem

This is a real example from a project I’m working on at the moment. This layout worked perfectly in FF3, Chrome, and IE8. It was only when I came to look at the layour in IE6 that I saw the problem.

When first loading the page the following shows:

The way it looks

Broken in IE6

As you can see the box with the tick in it is in completely the wrong place – it’s supposed to be just above the “read more” link. Now is where IE6 shows it’s real strangeness. When I hovered over the read more link, or the item itself, it moved to the right place.

I’d seen this problem a few times before, and thought I knew what I was doing to fix it – a light smattering of Position:relative, and Zoom:1 and I’d be done. Unfortunately, it wasn’t that simple. My next step was a search around the internet-o-web where lots of people seem to describe something very similar, and most of them recommend applying Position:relative to the parent of the float. This didn’t work for me.

A bit more playing with my setup revealed that applying Position:relative to the list item (the parent’s, parent’s, parent) fixed the problem. One to file away for the future!

Here it is where it’s supposed to be.

The way it should look

<ul id=”incomeList” class=”checkboxes nostyle clearfix”>
<%
foreach (var i in ViewData.Model.Income)
{%>
<li class=”item”>
<div class=”backgroundRpt rounded”>
<%foreach (var f in i.Factors){
var isChecked = f.UserValue != 0 ? “checked” : “”;
%>
<div class=”checkbox”>
<input id=”incomeFactor<%:f.FactorId%>” type=”checkbox” <%:isChecked%> value=”<%=f.Id%>_<%=f.FactorValue%>”/>
<label for=”incomeFactor<%:f.FactorId%>”>
<span class=”amount” id=”factor<%=i.ItemId%>”><%=Html.FormatCurrency(((f.FactorValue) * -1).ToString(“c”))%></span>
<%:f.FactorTitle%>
</label>
<a href=”#” class=”modallink linkButton rounded” title=”<%=f.FactorTitle%>”>read more<span class=”ui-icon ui-icon-circle-zoomin”></span></a>
<span class=”modaldetail”><%:f.FactorDescription%></span>
</div>
<h4>Consequence</h4>
<ul class=”consequencesCount nostyle clearfix”>
<li class=”consequence <%:f.UserConsequence.Css%>”>
<%Html.RenderPartial(“ConsequenceLink”, f.UserConsequence);%>
</li>
</ul>
<%}%>
</div>
</li>
<%}%>
</ul>