Please Help-->Problem with rounded corners in IE

[SuperGrover1981]

Gidday gang,

I'm currently designing a site that involves some content boxes with rounded corners. While the site comes out fine in Firefox, the content boxes seem to have a consistent problem in Internet Explorer:

Underneath the bottom of the (rounded) content box, there's a straight line, about 3 pixels high, of the same background colour as the content box. I can't seem to figure out why it's there or - more pressingly - how to get rid of it. The problem can be seen at http://www.phonehold.com.au/phonefacts.html Below is the CSS & HTML I'm using to make my rounded corners. Any help at all would be extremely appreciated.

Cheers gang,
- JB


HTML:

Code: Select all

  <div class="contentbackgroundsmall">
   <div class="roundtop"><img src="tl.gif" alt="" 
     width="16" height="15" class="corner" 
     style="display: none" />   </div><div class="textmargin">
          <p>&quot;Callers with silence on hold will abandon their calls in less than one minute, 90% hang up within 40 seconds. Callers with information on hold will stay on the line for up to three minutes longer.&quot; 
          <p><EM><STRONG>- North American Telecom</STRONG></EM></p></div> 
   <div class="roundbottom">
     <img src="bl.gif" alt="" 
     width="16" height="15" class="corner" 
     style="display: none" /></div>
 </div></p>

CSS:

Code: Select all

.contentbackgroundsmall {
    background-color: #0088ee;
    width: 520px;
    color: #EEEEEE;
    font-size: 12px;
    background-image: url(contentbackgroundtiny.jpg);
    background-repeat: repeat-x;
}

.roundtop {
    background: url(tr.gif) no-repeat top right;
}

.textmargin {
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
}

.roundbottom {
    background: url(br.gif) no-repeat top right; 
}

[/code]

[spinal007]

try these:
- .roundbottom {
background: url(br.gif) no-repeat bottom right;
}

- add display:block; to your divs

- make sure margin:0px; on images and divs

I always have this constant fight with IE and Firefox... Drives me insane!!!!!!!!!!!
Welcome to the club!

[moojoo]

.roundbottom {
overflow:hidden; /* will fix it */
background: url(br.gif) no-repeat top right;
}

[spinal007]

Originally Posted by moojoo

overflow:hidden; /* will fix it */

yep, that should work...

[SuperGrover1981]

*standing ovation*
*rapturous applause*
*throws underpants*

Many many thanks Spinal - very much saved my skin. If ever you need a kidney or anything let me know.

[minute44]

Originally Posted by SuperGrover1981

*standing ovation*
*rapturous applause*
*throws underpants*

Many many thanks Spinal - very much saved my skin. If ever you need a kidney or anything let me know.

Jeez, generous guy!

[spinal007]

* blushing *
Let's not forget moojooo though, overflow:hidden; has worked for me many times...