IE 8 Height not being calculated after element is expanded.

[MrMartineau]

I’ve just launched a new site and I have expandable and collapsible items in a list, in both IE6 and 7 the functionality of this works well but no so in IE 8.. please visit: http://j.mp/a1aqz0 , click on a book genre (Fiction/Non-fiction), a book list will appearto the right of it. These books can be expanded to show more detail but IE 8 does not seem to account for this change in height and so the items at the bottom of the list are cut-off and unreadable. If a user clicked the expand all button, then most of the items in the list would be cut-off.

I have tried quote a few different solutions to no avail so I welcome any and all ideas.

Also, I have purposely not named or linked to the website directly because I do not want this page to be in a search results page when searching for this particular website.

Many thanks in advance.

[noahgelman]

Add clear: both to <div id="footer">. That should stop it. If not, try removing the overflow:hidden on the column class.

[MrMartineau]

Thanks Noah, I have nearly got it to work. It seems it might’ve been down to my choice of float clearing, I have updated it using Jeff Starr’s new clearfix code which now seems to get it to almost work. The footer is now masked behind the expanding content making it unreadable.

This is causing me much annoyance because I cannot believe that IE 6 and 7 render this correctly but IE 8 does not.

BTW, overflow:hidden was removed on the .column and .row and clear:both added to the footer..

If you have any thoughts on the footer I would love to hear them.

Thanks again.

[MrMartineau]

I would like to be a perfectionist but this needs fixing quickly, so I will use it now and figure out the problems asap.

Thanks Virtual

[Author]

Posts