HTML and CSS

Rounded corners via css: Fine in IE, broken in Firefox

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2006

Posts: 36

Reputation: Spycat is an unknown quantity at this point

Solved Threads: 0

Spycat

Offline

Light Poster

Rounded corners via css: Fine in IE, broken in Firefox

May 14th, 2006

Well, this certainly is a turn-around -- the code I did works fine in IE, but breaks in Firefox!
What it is, is a thing to make rounded cornered boxes via css and images.
The top-left and top-right images are green, and the bottom-left and bottom-right are gold.
There is also a section for the main body to be green, and one part of it gold.
Any clues as to why it is breaking in FF?

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Fixed width rounded corners</title>

<style type="text/css">
body
{
color:#fff;
}
/* set millions of background images */
.rbroundbox { background: url(images/nt.gif) repeat; }
.rbroundboxyellow { background: url(images/ntyellow.gif) repeat; }
.rbtop div { background: url(images/tl.gif) no-repeat top left; }
.rbtop { background: url(images/tr.gif) no-repeat top right; }
.rbbot div { background: url(images/bl.gif) no-repeat bottom left; }
.rbbot { background: url(images/br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot
{
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }

.rbroundbox
{
width: 50%;
margin:10px 10px 0px 10px;
padding: 0 0 0 0 ;

}

.rbroundboxyellow
{
width:50%;
margin: 0px 10px 10px 10px;
padding: 0 0 0 0 ;

}
</style>

</head>
<body>

<div class="rbroundbox">
<div class="rbtop">
<div>hi</div>
</div>
<div class="rbcontent">
<p>Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, </p>
</div>
</div>
<div class="rbroundboxyellow">

<div class="rbbot"><div> </div></div>
</div>

</body>
</html>

[/HTML]

Thanks!