944,124 Members | Top Members by Rank

Ad:
May 14th, 2006
0

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

Expand Post »
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><!-- /rbcontent -->
</div>
<div class="rbroundboxyellow">

<div class="rbbot"><div>&nbsp;</div></div>
</div>
<!-- /rbroundbox -->
</body>
</html>

[/HTML]

Thanks!
Similar Threads
Reputation Points: 10
Solved Threads: 0
Light Poster
Spycat is offline Offline
49 posts
since Apr 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Bottom of Firefox/IE
Next Thread in HTML and CSS Forum Timeline: Editable combo





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC