extra spacing in IE

I think you are getting margin-collapse in modern browsers and not in IE.

.post_titleHolder {
margin:0 0 80px;
width:580px;
}

If I'm right, you will know it if you add
padding-bottom: 1px;
to that titleHolder box. Adding padding removes collapse and the gap should become as large in modern browsers as in IE.

If this works, then you'll just reduce the 80px bottom margin to 40px, and keep the 1px padding so it's the same in all browsers.

If it doesn't work, let us know.

Hi Stomme poes,

i tried ur advice, but unfortunately it doesn't seem to work

Any idea why?

Thanks

Sorry, I was a bit wrong... it is the margins, but I missed something first time.

Your post_titleHolder has a bottom margin of 80px, and inside it, everything is floated (except post_Date). You also have a set width on post_titleHolder.

What this means is, you've triggered Haslayout in IE6 and 7 (not IE8, Microsoft finally got rid of Haslayout). Setting a width in this case did it. When Haslayout is triggered on a box like post_titleHolder who's holding floats, it will let post_titleHolder "see" those floats, enclose them, and then the 80px margin starts after the bottom of the black post_title.

But in the modern browsers, you don't have anything telling post_titleHolder that it has floated children (this is normal! This is what the rules for CSS say should happen; IE is just doing it wrong). So because those boxes like post_titleHolder and post_Date can't "see" the floats inside them, they act as if they were empty. So for modern browsers, your 80px is starting at the TOP of post_titleHolder! (give post_titleHolder a red background colour and you'll see it either doesn't show up at all, or looks like a 1px tall line because of the padding we added). So it's not really as tall as you thought it was.

http://gtwebdev.com/workshop/floats/enclosing-floats.php explains what float enclosing is.

So in your case, you'll want to make the modern browsers also "see" those floats, by making post_titleHolder enclose them. Since you only have a set width and not a set height (a good thing!), you can probably use the declaration "overflow: hidden" on post_titleHolder. You're not trying to hide overflow, but any box who has to know where children are overflowing has to know where its floats are too, and that's what we want it to do: know where the floats are.

post_titleHolder {
overflow: hidden;
}

There are other ways to make boxes see their floats, but a lot of the time this is easy and works. You can't use overflow:hidden when you have the possibility of content getting cut off (it hides overflow, of course), so this isn't always the best way to do it, but it should work perfectly for you here.

With this, your 80px should look too big now in ALL browsers, and you can still change it to 40px then.

Hi Stomme poes,

Thanks for the insight, with some tweak it seem to work ok now!

Thanks again!