IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo

It is a well-known bug in IE6 and IE7. To solve it, you need to add position:relative to the container. Since in your case body is the container, I'd suggest you add a div directly under the body and give it position:relative. It should solve your problem.

This problem is apparently a known bug for IE 6 + 7, which was fixed in IE8.

To avoid this, in this case you can replace:

ul {
    left: -499px;
    position: relative;
  }

with:

ul {
    margin-left: -499px;
  }

This however gave some problems with the background I used on the infobox div, but nothing I couldn't solve with a few style hacks.