Paul_o_b - 12:48 pm on Jul 13, 2011 (gmt 0)
No worries I like a challenge :)
I'm still stuck in IE6 mode and when I float a list element that contains one anchor then I always float the child anchor as well to avoid an IE6 bug. If the anchor is set to display:block and then also gets haslayout in some way (excluding width or float) then the anchor will display 100% the width of the screen as each anchor occupies one whole line. If you float the anchor as well then you avoid that bug from happening.
Also when dealing with inline elements vertical margins have no effect and although padding has an effect it does not affect the flow outside of the line-height (it just bleeds outside). Also background images on inline elements is undefined in the specs so its always better to have a block display when applying a positioned image.
If you remove the float from my example above you will see that the height of the red box extends to 49px rather than the 46px that it should be (16px + 15px + 15px).
The list element could have been set to display:inline of course if it wasn't being used to hold anchors but sometimes in IE6 that leaves you with an extra small gap so I always float them as well.
As usual with CSS there's probably loads of other ways to do the same things. I think that's the beauty of CSS :)