Slight snag

[Magiccamera]

On my web site, I have a few photographs and instead of using a pre-built gallery I decided to do one on my own.

So I have 20 photographs laid out as thumbnails and each one links to a hidden <div> This works excellently but for one snag that I can’t for the life of me figure out.

When the hidden div shows with larger image I have a short description which is all fine and dandy as it fits neatly and pushes the navigation down as expected. But, if I have a longer description the hidden div does not push the footer of the page down instead overflows above it. Here is CSS for it:

#photography1 {
margin: 17px;
width: 680px;
position: absolute;
top: 113px;
z-index: 1;
visibility: hidden;
}

Using a show/hide generated javascript by Dreamweaver, it works fine.

view site at http://www.magiccamera.com/hiddenproblem.html I’ve stripped out most of the other elements just to demonstrate more clearly my issue.

Thanks and appreciate any feed back on this.

[jamygolden]

I think your problem is the "position: absolute;" if you remove that you should see a difference.

[Magiccamera]

Ummm looks like I finally figured it out, has a lot to do with position whether it be relative or absolute and how the initial container with the thumbnails is coded too.

Doh!

But do look at the issue anyway, maybe what I have done is just a fix or might not work properly with IE.

[Magiccamera]

Yeah Jamy_za it has very much to do with the positioning attribute. Thanks for your input.

[Magiccamera]

However one problem solved in this case begats another one, one that I think I can control. Again thanks for the input, it has put me on the correct path of best practices.

[jamygolden]

No problem.
Feel free to update your ‘hiddenproblem.html’ page – and let us know – if you have any other problems.

[Magiccamera]

Cheers mate.

Right now I am going to leave everything for now and just not write too long a description. However, I do intend to pull it all apart and put it back together piece by piece and possibly try a different method.

But the position attribute is certainly the culprit.

[Author]

Posts