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:
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.
<%
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>