CSS Align in IE

I can usually figure out most CSS problems but this one is a mystery.

The following creates a curved box by covering the corners with a curved image. The problem is in IE6.0, the corner images do not align at the top but display about 10 pixels below it, so therefore I have a box line and corners at the top and then the curved corners 10 pixels below it. Other browsers display fine, including IE7.0.

Why is it doing this?

Here is the CSS:

<style type="text/css">
.contain {
position:relative; top:0; left:0; text-align:left; padding:0; border:1px solid #ccc; margin:0 0 10px 0; background-color:#fff; vertical-align:top;
}
.corner-top { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; top:-1px; right:-1px; background:transparent url(/images/crn_tr_bb.gif) no-repeat top right;}
.corner-top .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background:transparent url(/images/crn_tl_bb.gif) no-repeat top left; }
.corner-bottom { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; bottom:-1px; right:-1px; background: transparent url(/images/crn_br_bb.gif) no-repeat bottom right;}
.corner-bottom .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background: transparent url(/images/crn_bl_bb.gif) no-repeat bottom left; }
</style>

<div class="contain">
	<div class="corner-top"><div class="corner-left"></div></div>
    <div class="intro" style="position:relative;"><p>Text here...</p>
	<div class="corner-bottom"><div class="corner-left"></div></div>
    </div>

Code (markup):

 

Well, this may not be the problem, but at least it's a place to start...

I noticed that you didn't set the padding size to 0 on the corner elements. There may be a default padding in IE 6 that there isn't in IE7.

 

Please give the link of that page... so that, it will be able to see the exact problem..

 

This is the double-margin issue with IE although I'm not using float elements. Instead, the images are aligned so I guess it affects that.

I wrapped them with a "display: inline;". I might not need the extra div (or the padding) to do it but at least it works.

Works in at least Windows XP FF, IE6, and IE7.