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.

[Blue!]

Thank you kuroi. I didn't see the silly mistakes I made regarding the margin.
Regarding the validation errors, specifically the </table> I am not sure where I go to correct it.

<!-- eof: upcoming_products -->
</div>
</td>

  </tr>
</tbody></table>

    <table border="0" cellpadding="0" cellspacing="0" width="914">
      <tbody><tr class="footertop">
        <td class="footertop" align="center"></td>
      </tr>
    </tbody></table>
    <table class="footer" border="0" cellpadding="0" cellspacing="0" width="100%">

<!--bof-EZ-Pages footer display -->

I found the extra tags easily enough, but I don't know what section to edit them in. Since I only edited the header and footer files, I don't really know where else to look.

I also still have the problem with the headers in FF and Opera, whereby they overlap the next content.

[Blue!]

I still haven't been able to resolve the problem with the headings:

this is what is displayed in opera and FF


this is what it should look like, being displayed in IE:


I am not quite sure what is going on here, or even how it can be fixed, any help would be much appreciated.

[kuroi]

Opera and Firefox will tend to take you at your word, Internet Explorer often substitutes its own judgement for yours. In this case you have told them all that your headings have zero height.

.centerBoxHeading {

margin: 0;
height:0px;
background-color: #5f5b8d;
padding: 0.5em 0.2em;
text-align: center;
color: #ffffff;

}

Firefox and Opera correctly set the height to be zero and display only that part of the heading box that is visible as a result of the 0.5em padding top and bottom. Internet Explorer wrongly ignores your instruction, but looks right because you really didn't really mean to set this to zero!