Bottom round corners of a content rectangle

Not showing properly: bleed below rectangle

[picophd]

Greetings,

This is my CSS code:

#content {
margin: 2% 5%;
width: auto;
position: relative;
font: 1em/1.4em Verdana, Tahoma, sans-serif;
background-color: #FFF;
padding: 0.5em 2em;
}
.topright {
float: right;
position: relative;
width: 12px;
height: 12px;
margin: -0.5em -2em 0 0;
padding: 0;
background-image: url(tr.png);
}
.topleft {
float: left;
position: relative;
width: 12px;
height: 12px;
margin: -0.5em 0 0 -2em;
padding: 0;
background-image: url(tl.png);
}
.bottomright {
float: right;
position: relative;
width: 12px;
height: 12px;
margin: 0 -2em -0.5em 0;
padding: 0;
background-image: url(br.png);
}
.bottomleft {
float: left;
position: relative;
width: 12px;
height: 12px;
margin: 0 0 -0.5em -2em;
padding: 0;
background-image: url(bl.png);
}
 

And this is part of my HTML:

<div id="content">
<div class="topright">
</div>
<div class="topleft">
</div>
<p>some paragraphs(s)</p>
<div class="bottomright">
</div>
<div class="bottomleft">
</div>
</div>
 

Those codes are to adjust the images of the four round corners of a content rectangle. Now the problem is that the two bottom round corners are not showing properly in Firefox 1.0. They bleed outside the rectangle towards the bottom, with a few pixels. And no matter what I change or try, it won't work.

Second, the corners don't look even close to right in Internet Explorer 6.0.

Do you have any idea how to correct this thing?

Thanks a lot for anyone taking the time to help and give tips.

[tedster]

I played around with this a bit, and the only way I could get solid results in Firefox and Opera was to go to pixels instead of ems for the margins and padding. Makes sense - ems are relative but the image is an exact pixel size and you need it all to show.

But IE - sheesh. IE does not handle negative margins very well. Don't know what to say there, except hope someone else has an idea.

I'd be tempted to do the corners as foreground images rather than background - probably get better cross-browser and cross-platform results that way. I know it puts more code on the HTML instead of in the CSS, but sometimes you gotta do what you gotta do.

[createErrorMsg]

You might want to check out Soren Madsen's article, "Creating Custom Rounded Corners." His solution is simple and has the added bonus of being semantically correct (i.e., there are no elements that exist merely for the sake of holding a background image; they all serve some other, semantic purpose in addition to holding a background image). It's worth the read.

The article can be found on his site, Picment [picment.com]. It has also appeared on ALA. (Mods, clip this link if you must, but at least I didn't post the ALA addy!)

cEM