2 css issues

I am having 2 little css problems.

1. I have a fixed footer layout, but the page content sometimes disappears behind the footer, (both FF and IE7).
I am using a spry collapsible panel in both cases.
On the home page it seems OK and the footer moves down when the panel expands
On the gallery page (choose suffolk), the text in the panel goes behind the footer.

2. To display 4 images across the screen, i have a left floated div in a repeat region.
The spacing is nice in FF but in IE the space between the image and the text is bigger, so I get overlap problems.

test site url is as follows... www.gallery.stonepits.com

1) I noticed you have a top margin applied to the body tag, this is forcing the fixed footer to be moved down and causing a scrollbar to appear. I would recommend having no margins for the body tag to have a properly working fixed footer.

As for the spry panel, trying adding some bottom margin so the content stays above the footer.

2) In your #imagebox css, instead of specifying a height: 150px, remove that and instead try overflow: hidden;

great.

point 1 helps, the spry panel works better with a 30px bottom margin, and i took the top margin off the body as you suggested.

on point 2, i tried your suggestions, but the ie gap remains significantly bigger than ff.

the gap between the image and the add to cart button is due to how IE formats the form in which the 'add to cart' button is placed.

i put the form in its own div and set the css so that it was spaced like other forms on the site and the IE padding is fixed.

just one thing i noticed, the scroll bar isn't present in FF, but it is there in IE, even though it doesn't seem to be needed as the page heights seem the same.

You can always "zero" out the form css as well which should make IE behave better. A general rule like:

form {
  margin: 0;
  padding: 0;
}

Thanks justin.

I am still having some issues with the fixed footer. In FF, the scrollbar fails to appear (sometimes) when it should, hence the content disappearing behind the footer.

Just re-visiting this issue.

On several pages on this test site, i have a collapsible panel, which, when expanded, pushes the content behind the fixed footer.

my 'quick & dirty' fix is to put some empty tags at the bottom of the content, which seems to stop the content from disappearing, but there has to be a 'proper' solution.

examples include..

contact.php
sitemap.html