Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE7 CSS Scrolling Div Bug

I recently came across an IE7 only bug that I thought I'd share so when I come to this site 6 months from now to figure out the same thing, I'll have it on hand.

I believe the easiest way to recreate this bug would be the following html in a page with a declared doctype (it works correctly in "quirks mode" / no-doctype):

<div style="overflow: auto; height: 150px;">     <div style="position: relative;">[...]</div> </div> 

In IE7, the outer div is a fixed size and the inner div is relatively positioned and contains more content (assuming the inner div causes an overflow). In all other browsers, this seems to work as expected.

Screenshot: bug screenshot

like image 883
frank hadder Avatar asked Sep 15 '08 22:09

frank hadder


1 Answers

The easiest fix would be to add position: relative; to the outer div. This will make IE7 work as intended.

(See: http://rowanw.com/bugs/overflow_relative.htm).

EDIT: Cache version of the broken link on waybackmachine.org

like image 176
frank hadder Avatar answered Sep 29 '22 09:09

frank hadder