hasLayout issues triggered in IE6 by javascript click event

Posted by Dan Eastwell Tue, 19 Jun 2007 08:19:17 GMT

I had what appears to be a hasLayout issue triggered in Internet Explorer 6: extra bottom padding (equal to the top padding) on an element which has bottom padding explicitly set to 0 in the CSS.

This only occurred when an element this element contained was clicked and an a click event was triggered. On click a javascript function added a class to the link that was clicked.

I could resolve the extra padding problem using the IE developer toolbar by adding position:relative or padding-bottom:0, but it wasn't resolved by either adding these declarations to the CSS or adding them to the element on the click event on the <li> that was clicked.

This problem appeared in IE6 only and was due to adding an additional unecessary float to the contained >ul>. There was no workaround for this issue being triggered by a click event, except for creating a reduced test case in the HTML, and then commenting out the CSS piece by piece until I found what was causing the problem.

Posted in ,  | no comments | no trackbacks

Comments

Trackbacks

Use the following link to trackback from your own site:
http://www.thoughtballoon.co.uk/blog/trackbacks?article_id=haslayout-issues-triggered-in-ie6-by-javascript-click-event&day=19&month=06&year=2007

(leave url/email »)

   Comment Markup Help Preview comment