The page is [gideonsquared.co.uk...] and in IE6 the DIV doesnt let the contact form scroll. Everything else in the div scrolls apart from the contact form.
Please can somebody help?
Thanks
Furiat
6:39 pm on May 26, 2010 (gmt 0)
A classic problem of IE6 interpretation of positioning.
For those, who drop by by mistake if the site is unavailable - a static height scrollable div with a form inside. Elements of the form are placed inside <span> elements which are styled as position:relative.
This is the key.
position:relative (as well as position:absolute) will cut several links (depending on the browser) between the parent and the styled element. In this case the scrollable div, being the (indirect) parent, will not recognize our styled element as the one to scroll along with the text. Thus the text (which is not positioned relative) will move and the form elements (positioned relative) stay still.
Two ways of solve the "cut link" problem: 1. Do not position:relative elements unless absolutely necessary (in this particular case - it isn't). 2. Style the parent element as position:relative or position:absolute. Only then the "link cutting" process won't occur.
Tested both ways on the page in question - they worked, albeit changed the layout a little. That's why I suggest resigning from position:relative, which in this case was used to create a small left indent for them. Mate, use margins. If they don't work with spans (weird stuff happens on IE6) - use divs. If divs don't work - add "zoom:1" to their style.
