Please Help-->Problem with rounded corners in IE

SuperGrover1981 · #1 Jul 6th, 2006, 14:51

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 · #2 Jul 6th, 2006, 15:16

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 · #3 Jul 6th, 2006, 17:01

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

spinal007 · #4 Jul 6th, 2006, 17:11

Quote:

Originally Posted by moojoo

overflow:hidden; /* will fix it */

yep, that should work...

SuperGrover1981 · #5 Jul 6th, 2006, 22:55

*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 · #6 Jul 7th, 2006, 08:59

Quote:

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 · #7 Jul 8th, 2006, 09:24

* blushing *

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Rounded Corners	Aaron1988	Web Page Design	22	Apr 18th, 2007 19:15
css rounded corners	geoffmuskett	Web Page Design	8	Jan 4th, 2007 20:40
Css rounded div corners	AdRock	Web Page Design	2	Aug 7th, 2006 13:25
Rounded corners 1 pixel out in IE	hessodreamy	Web Page Design	1	Jan 17th, 2006 15:44
Tables with rounded corners	Ice288	Web Page Design	3	Jul 12th, 2005 18:12

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Please Help-->Problem with rounded corners in IE