IE7 Bug, horizontal scrollbar

If you have IE7, you should have a scrollbar indication there is double the size of the screen width. If not, this is a fairly plain page!

My collegue Emily Coward found this whilst doing the front-end code for a web application, it happens when:

You have a block of over 50% wide, relatively positioned. (Including the body.)
There is a absolutely positioned item in the right hand side of the block (i.e. from left: 50% onwards).
You have a block element within that has a negative margin-top or margin-left. I.e. less than 0.

The fixes are:

Not fulfill the conditions above.
Add some padding to the containing (relative) element.
Add a width to the absoluteley positioned element (thanks to Philippe Wittenbergh).
Apply overflow-x:hidden; to the absolutely positioned block (thanks to Ingo Chao).

Back to Testing page.

Published 31st Jan 2007, last updated 1st Feb 2007.