[thelist] IE6, position: relative and overflow: hidden

Gunlaug Sørtun gunlaugs at c2i.net
Wed Aug 30 01:05:16 CDT 2006

Paul Bennett wrote:
> I'm using an altered version of Cameron Adams' CSS form layout to 
> (duh) lay out a form. I'm also using the YUI animation library to 
> show / hide form fields based on user preference.
> All is well in Opera in Firefox, but IE6 shows the relatively 
> positioned input fields when the rest of the content of the p element
>  is hidden.

The bug is well known - although not well documented AFAIK, and is part
of IE6' (and older versions) many paint- or rendering-bugs. May be seen
as part of the 'hasLayout'[1] bug, since there's always a relation.

The combination of 'overflow: hidden' and 'position: relative' is most
often used to make IE6 respect fixed dimensions and make elements inside
such a dimensioned element visible, and make them overflow it when
needed - just like other browsers do.

My best bet is that you change 'position: relative' to 'position:
static' or 'position: fixed' on elements that are inside a hidden field,
and change back when you want to show it.



More information about the thelist mailing list