Question

I’m a beginner and have just about managed to put together this website with one problem remaining. I had other problems aligning the CSS in Internet Explorer 7, so I put an IE7 specific style sheet in. Now one problem remains and I have tried everything to fix it but just can’t get it to work. It is on this page http://bit.ly/fxggEu (in IE7 only.)

The ‘Paleohori village’ text and the Google Map are positioned way too low down and the bottom part of the Google map cannot be seen as it’s been cut and is’hiding’ behind the footer. It is aligning exactly how I want in other browsers with the caption in the right place, a gap between the image and the google map, and the google map positioned over the top part of the footer.

I have tried playing with the margins, padding, google map size, z-index etc… But without any success. If anyone can help I’d be most grateful. Thanks in advance.

Answer 1

A simple fix is to add position: relative to #container.

On an unrelated note, you have on #footer this rule: top-margin: -130px;. It should be margin-top, but you don’t want that style anyway, so get rid of it.