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.