Float and Heading Title Issues

[Blue!]

I have just quickly knocked out a template but when testing noticed a few errors. One of which is that in IE the page does not float left as it is supposed to, but rather seems to float in the center. In both Opera and FF this problem does not occur.

Secondly, in Opera and FF the heading titles do not display properly, I think it may be a padding issue. This results in the headings over lapping the following content. This does not happen in IE.

Any help would be much appreciated.
Thanks

[Kim]

It is very hard to diagnose problems you can not see ... the URL?

[Blue!]

Terribly sorry, http://templates.thestudenthouse.co.uk

[Blue!]

Something else I noticed was that also in IE there is a gap between the footer and the left column. This does not appear in FF or Opera and I can't seem to fix it.

[DogFusion]

First and foremost, you have a lot of errors. Repair these and then check for cross browser compatibilities.

[Blue!]

I generally leave things like adding alt tags to images (which all but a few errors were, the others were extra </ tags, or errors in alt tags that the zen cart default prodcuts use) last when making a template. I consider things such as that the finishing touch, if the template doesn't yet display properly is a far more pressing issue. But seeings as I can't seem to fix the display errors I'll do these first. But it still doesn't help me solve the problem of why the template isn't displaying correctly.

[kuroi]

Some of your validation errors are structural rather than cosmetic, in particular the extra table tags that close features that haven't been opened. When this happens browsers struggle to cope and often find different solutions leading to inconsistent displays. However, that's not what is causing your first problem.

Instead you have a CSS error right at the top of your file. You can't float the body tag, or to be more accurate, you can but it's meaningless. Body refers to everything that you can normally see in your browser window, so if you give it a background color it will stretch from top to bottom and left to right. So floating it left is meaningless and somewhat confusing to browsers. FF seems to be trying to cope by instead floating the contents of body to the left thus masking your real problem. IE, more correctly in my view, ignores this instruction completely.

So where is the real problem? If you do a search on #mainWrapper you will find a bit of contradictory CSS. So you set a padding-top and then promptly override it. Then you set margins to 0 before overriding with margin auto. It's this last one that centers your page. Take this out and your left margin will return to 0 and everything will slide across to the left. Cleaning up your CSS generally will make these types of problems easier to spot.

The gap in IE between the main body of your page and the footer could be the result of an IE whitespace bug or due to IE trying to handle your the extra table tags differently to FF. I recommend cleaning them out and then the problem may become a little more clear.