I think I've identified my problem, but I'm not aware if there's a workaround. In Internet Explorer 7, when applying a margin to li tags, it does not apply to the first-child of the UL in the following cases:
- If the
<li>tag has overflow set
- if the
<ul>tag has a border set
Sounds crazy but the proof can be seen at http://www.medetis.com/css.html
In the first example, there is no overflow set to the
<li> tags and this is actually the result I'm looking for -- but in the final use of this CSS, the contents of the
<li> are all floated so I set the overflow to auto.
In the 2nd example, you can see what happens when the rule
overflow: auto; is set on the
In the 3rd example, I've removed the border from the
<ul> but left the overflow set - this displays the proper margins, but not the border, which I need/want.
The goal is a solution that looks like the first example, but can contain only floated content in the
The overflow:auto seems to be triggering a hasLayout bug on the ul.
add zoom:1 to the ul and it all should snap back into place.
Some further reading on hasLayout bugs and triggers which confirms overflow to be the suspect: http://www.satzansatz.de/cssd/onhavinglayout.html