css frustration!


i have got a problem with a css site i'm working on which is really frustrating.

the footer of www.michael-tyler.co.uk should be flush with the bottom of the picture, but in IE5 there is a gap. i have seperated the footer into 2 divs - ther parent with the dimensions and the child with the padding. so i can't work out what i've done wrong. very annoying...

the stylesheet is here - www.michael-tyler.co.uk/styles.css

hope someone can help!

Looks fine in IE5 (Mac) for me.

If you're talking about IE5 for Windows you're opening a WHOLE new can of worms.

As a side-note, this is some really nice, structured CSS. A quick validation at the w3c will tell you, however, that no two elements on a page can have the same ID (even if they're of different types). So where you have a DIV and an unordered list both with id "mainnav", you should either be using a class (if they actually have the same properties) or some new name for the list itself (like "navlist"). Chances are, you don't actually need the surrounding DIV anyway.

There's no need to use two DIVs for the footer. One DIV will be more than sufficient, and just apply the padding properties you currently have on #footertext to #footer p

Your page also introduces a horizontal scroll-bar for me. I think it's a problem with the body property in your CSS. Horizontally centred objects should be centred with margin-left: auto, not margin-left:50% (and likewise to margin-right).

But like I said, it's not got any problems on my IE5.
whoops... the homepage is working, but the about page (www.michael-tyler.co.uk/about.htm) has a gap between the bottom of the main content area and the footer. In IE5 mac...

any idea why that might be?!

thanks for your help with the other stuff. i got the bit about using 50% padding from christopher schmitt's css cookbook. apparently using auto margins doesn't work so well in IE?