Horizontal Gap Between Divs

[ridgedale]

I wonder if anyone can point me in the right direction. I have a webpage that works in Firefox (Mac & PC), IE7 (PC - works OKish!), Safari & Camino but when I preview the webpage in IE5.5 or IE6 it breaks with a big horizontal gap between the header div and the rest of the page. Below I've attached a link to the page:

http://ridgedale.powweb.com/TinHorse/sbx_sustain.php

I've also provided a couple of screen grabs showing the problem in IE5.5 and IE6:

IE5.5:


IE6:


Firefox2007 displays correctly:


Any help would be appreciated. Thanks in advance.

[drhowarddrfine]

The easiest thing to try is adding 'vertical-align:bottom' to the <h1> containing that image. That's one IE bug but the other has slipped my mind for some strange reason. I should know this.

[drhowarddrfine]

On second thought, forget that. Let me look again.

[drhowarddrfine]

For some reason, I can't get my IE viewer to work with that page. I don't run Windows and my Windows box isn't available so I'll have to try again tomorrow. You can still try what I suggested above to see what happens.

[ridgedale]

drhowarddrfine, thanks for your reply. Unfortunately, the image you are seeing ing inside the <h1> tags of the header div is for the text heading only. The typewriter image is a background-image with no-repeat and a fixed position tied to the header div, so what you have suggested won't work.

Thanks again.

[ridgedale]

I've managed to resolve this problem by setting

margin: 0;

on the <h1> class.

Thanks again.

[drhowarddrfine]

That was going to be my other suggestion but it looked like you already had that applied there. This is the second IE bug I mentioned above.