ie7 problem with footer staying on bottom of page

Question

Hi

If someone can please help I am having an issue with my site in IE7. Go to this link

Testing page link

When you load the page then hover over one of the top nav links the Footer shoots up half the distance on the page and can only be reset by rolling over another tab on the right.

What the heck is going on? Is this a DOCTYPE or CSS problem? Here's what I've already checked

1. Doctype
2. CSS styles for image height and width to see if its releasing some kind of height (I dont know)
3. Duplicate css styles

Any help would be awesome THANKS

Answer 1

why does your body have padding-bottom:5px; ? what happens when you remove that?

Answer 2

this has a strange smell to it (from your CSS file):

.rollover { display: block; cursor: pointer; }
/* Allow setting widths and heights */

.rollover img { width: 100%; height: 100%; border: 0; }
/* only set width and height once */

.rollover:hover { visibility: visible; /*for IE */ }
/* sets any property for the :hover state */

.rollover:hover img { visibility: hidden; }

i would fool around with this here, maybe getting rid of the visibility hack...

if you want to make something not show, use display: none; instead of visibility: hidden;

EDIT: While this may or may not be a solution, I used to put endless comments in my source code so that I "knew where I was" when I was developing. One day I came across a strange error in IE that was generated by the use of a strange combination of comments. After I got rid of all my comments, the error was gone... I'm not saying, I'm just saying... maybe worth a shot...

Answer 3

I wanted to add comment. But, I dont have any points to add comment. Thats why adding it as answer.

I am using IE8. I have opened the link you have given in IE8 and I haven't noticed what ever you mentioned. It is working fine... If possible, you can try using IE8.

Thanks, Srikrishna.

Answer 4

Hey, interesting one :)

Just add:

overflow:hidden

to #nav a

Btw there are some better, pure css rollover techniques, just in case you didn't know

Answer 5

Hi,

Really strange issue...

I was just curious about your float: left; property on #footer, and after i deleted that it seemed to work. Give it a try...

hope it helps. Sinan.