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 <li> tag.

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 <li>.

1 answer

4
points
This was chosen as the best answer

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

Answered over 6 years ago by Tony Crockford
  • adding padding doesn't seem to help the issue. Erik William over 6 years ago
  • zoom fixes the problem; I vaguely knew about "hasLayout" issues but never really understood them til I read that linked article, thank you. Erik William over 6 years ago
  • Nice one, Tony. +1 Abinadi Ayerdis over 6 years ago