Grow your CSS skills. Land your dream job.

IE 8 Height not being calculated after element is expanded.

  • # March 10, 2010 at 4:51 am

    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.

    # March 10, 2010 at 7:30 am

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

    # March 11, 2010 at 7:51 am

    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.

    # March 11, 2010 at 11:18 am

    If you are not too much of a perfectionist you can always use an IE emulate so that IE8 acts like IE7.

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> (for XHTML)
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" > (for HTML)

    It must be immediately after the <head> tag, not lower down the head section.

    # March 11, 2010 at 11:50 am

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".