Alignment issue with margin-top in different browsers

Can't get safari, IE and firefox to all align the same way

[Matt_Scales]

The prob I'm having is the CSS alignment of the rightcol div and leftcol div on this page.

In Firefox and Safari they align perfectly but in IE there is a green gap, and the images in rightcol are too high.

Try as I might I cannot get the alignment right.

Is it the p margin in rightcol? is it an IE floats issue? I'm stumped....

Does anyone have any tips for me? Don't know where to look. I want leftcol div and rightcol div to line up right under the buttons div.

In Firefox and Safari everything is fine.

How can I get rid of the gap, but push rightcol down in IE without breaking Safari and Firefox?

Thanks,
Matty

<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

[edited by: SuzyUK at 9:00 am (utc) on Sep. 14, 2006]

[Setek]

Hi Matty,

Please read up on the CSS Forum Charter [webmasterworld.com] and the Webmaster World Terms of Service [webmasterworld.com], as you are not allowed to drop URIs like that.

About your problem though:

Your images are displayed inline, and as such, its vertical align is at text-bottom (I believe, someone correct me if that's incorrect) rather than bottom itself.

Set all the images to have a vertical align of bottom, and it should fix that issue.

As for moving the right column down for IE only, there's conditional comments [msdn.microsoft.com]. However, please remember not to overuse conditional comments - it's all too easy to lose track of what properties you've overridden with a conditional comment :)

Best advice is to apply sparingly where needed :)

[Matt_Scales]

OK thanks. I'll see how I go with aligning bottom - I'm not sure how that will fix the difference between IE and other browsers though?

Cheers,
Matty