Divs won't align in IE6

[KarmaDungyu]

Hi all, I'm working on a design, which aims at validating, and am having trouble getting some divs to line up flush in IE6. It works fine in Firefox 1.5 (both on pc). I've attached screengrabs of IE6 and FF. I wonder if anyone can offer any help?

There's two divs, both the same, with a repeating background image (the green diagonal pattern). <div class="band"></div> In IE6, there's a 6 pixel margin below both the band divs. I've moved the divs around, and wherever the band class goes, there's always this 6 pixel margin underneath, so I believe the problem lies with this div. I tried it with an image which was the width of the div, so it would seem it is nothing to do with repeating a small image across the div (the first time I've done this).

The css for this div is:

.band {
width: 740px;
height: 7px;
background: url("../images/home/band_back.gif") no-repeat;
}


The page can be found at:
http://www.ae-di.com/

The style sheet is at:
http://www.ae-di.com/stylesheets/main.css

I'd be really grateful for any help with this. I've been looking at it and trying stuff, but can't see what is going wrong. I haven't been able to view the page in IE5.5 and 5 - can anyone tell me if the same error is there?

many thanks in advance,

karmadungyu

[KarmaDungyu]

ugh .... too tired, forgot to attach :-(

[KarmaDungyu]

Hi, I've been able to take a look at the page in IE5.5 and IE5.01 pc and the same problem appears there. (there's also another problem with the menu items spilling out of their containing div which I'll have to fix).

Can anyone help with solving this unexplained gap between divs in IE?

many thanks in advance,

Karmadungyu

[KarmaDungyu]

Hi, I've found the problem! I have been trawling through previous posts, and other sites, and found a solution on this one, courtesy of Paul O'B !

The problem is (in Paul's words):

Issue 2 is the fact that ie won't render an element less than the current font-size unless overflowLhidden is used or you set the font-size to zero.

http://www.sitepoint.com/forums/show...vs+extra+space


That was my problem. The div is only 7px high, and my overall text size is set to 11px. So the div gained some extra pixels below it as a result!

Thanks Paul!

* I've now made the necessary change in the css, so you will no longer see the problem at the live site. (I still need to address the menu bar issue in IE pc) *

Karmadungyu