IE7 left:%; bug

Question

I'm working on a project, I use the latest IETester, and I bumped into a IE7 specific alignment bug. view this in IE7 and then in any other browser, for example Firefox, IE8 and even IE6. Notice how the little "|" between the lower links is not visible in IE7, yet it looks fine in the other browsers. Removing the left:-100%; from on line 61 fixes the bug as seen here, but i need this "left" for positioning.

Any help on what is causing this bug, or potential ideas on how to fix it much needed.

Answer 1

I don't know exactly why you use the left:-100% trick but what you do can be achieved much more easily. You want to make the toplevel ul to be inline-block, Make "Forums" be block level and the other ul block level (and the li items in there be inline) then you can forego many of the big positioning commands, and don't do ill-defined things like left:-100%