IE7 shows hidden content space when content not visable. Help please.

Hi there,

I am currently working on a photography site that has a mootools hidden layer vertical slide triggered by #info. When the link is clicked #info reveals hidden content. Now the problem is that in IE7 the page has a heck of a lot of space just under the footer, it looks like the page is displaying a fully extended page even though content is hidden.Now is Firefox all performs well and there is no whitespace, why is there some in IE?

This is the style in question:

#info {
background-color: #e3e7e2;
text-align: left;
position: relative;
margin-left:15px;
border-top: 15px solid #fff;
z-index: auto;
}

At first I thought is was a hasLayout issue and used:

#info {
height: 1px; /* hasLayout */
}

This did infact correct the whitespace issue but because I was
specifying a 1px height the slide could not slide more than 1px.

Here is a screen grab of my page: http://www.elymods.com/footer_grab.jpg

Does anyone have any suggestions as I have drawn a big fat zero.

Many thanks

Karl

Commentary For ''

This photograph was taken with a and uploaded on although it was actually taken or scanned on .

Exif Information For This Photograph

Almost all new digital cameras save JPEG files with EXIF data. Camera settings & scene information are recorded by the camera into the image file.

Exposure: | Aperture: | Focal Length:

Social Bookmarking

Social Bookmarking sites allow you to store, tag and share links across the internet. You can share this photograph with friends.

Viewer

Comment on this photograph

HTML is disabled, but URLs will be auto–linked. Your email address won’t show up on this page.

Quality over quantity — comments that don’t add to the discussion in a substantial manner will likely be deleted.