Rounded Corners on Div Block

[sabafana]

Hi Everyone,

I am trying to add rounded corners to my div blocks
but the alignment seems to be off with every browser that I view it with.

Also I am battling to center the links at the top of the page with the shaped
nav bar.
VIew the page at
[url]http://www.hirschgift.com/layout.html[/url]

Does anybody have any ideas?


[url]http://www.hirschgift.com/layout.html[/url]

Below is the CSS:

html, body, img, label, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100.01%;
color: #000000;
background-color: #F5F5F5;
text-align: center;
}

#wrapper {
background-color: #FFFFFF;
width: 770px;
margin: 10px auto;
background-color: #F5F5F5;
text-align: left;
}

#banner {
height: 75px;
background-image: url(../images/banner.gif);
background-repeat: no-repeat;
border: 1px ridge #4C4C4C;
}

#nav {
background-image: url(../images/nav.gif);
background-repeat: no-repeat;
height: 22px;
}

#nav ul{
padding: 0;
margin: 0;
}

#nav ul li{
display:inline;
padding: 0;
margin: 2px;
}

#nav ul li a{
font-size: 80%;
color: #000;
background-color: transparent;
padding: 0 18px 0 18px;
text-decoration: none;
text-align: center;
width: 7em;
}

#nav ul li a:hover, #nav ul li a:focus{
background-color: transparent;
color:#339900;
}

#leftcol{
margin-top: 20px;
margin-left: 5px;
float: left;
width: 170px;
border-top: 1px ridge #4C4C4C;
}

#leftcol ul{
padding: 0;
margin: 0;
background-color: transparent;
list-style-type: none;
font-size: 90%;
border: 1px ridge #4C4C4C;
}

#leftcol ul li{
padding: 0;
margin: 0;
}

#leftcol ul li a{
font-size: 90%;
color: #000;
background-color: #FFF;
text-decoration: none;
padding: 4px 0 6px 4px;
height: 1%;
display: block;
}

#leftcol ul li a:hover, #leftcol ul li a:focus{
background-color: #FFF;
color:#339900;
}

#leftcol p{
font-size: 95%;
padding: 4px;
background-color:#8FD720;
border-left: 1px ridge #4C4C4C;
border-right: 1px ridge #4C4C4C;
color: #FFFFFF;
}

#content {
margin-top: 20px;
margin-left: 200px;
}

#content p {
font-size: 80%;
margin: 20px;
}

#content h1 {
font-size: 130%;
color: #003366;
padding: 0;
margin-left: 20px;
}

#content h2 {
font-size: 110%;
padding: 0;
margin-left: 20px;
}

.leftimage {
float: left;
margin: 0 10px;
border:1px ridge #4C4C4C;
}

.rightimage {
float: right;
margin: 0 10px;
border: 1px ridge #4C4C4C;
}

.container {
width: 99%;
float: right;
background-color: #FFF;
border: 1px ridge #4C4C4C;
}

#tl {
position:relative;
top: -3px;
left: -25px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#tr {
position:relative;
top: -3px;
left: 556px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#bl {
position:relative;
top: 425px;
left: -25px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#br {
position:relative;
top: 100px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

.clearit {
clear: both;
}

#footer {
background-color: #FFF;
border: 1px ridge #4C4C4C;
text-align:center;
color: #000;
clear: both;
}

#footer p {
font-size: 70%;
padding: 10px;
margin: 15px;
border-top: 1px solid #8FD720;
border-bottom: 1px solid #8FD720;
}

html, body, img, label, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100.01%;
color: #000000;
background-color: #F5F5F5;
text-align: center;
}

#wrapper {
background-color: #FFFFFF;
width: 770px;
margin: 10px auto;
background-color: #F5F5F5;
text-align: left;
}

#banner {
height: 75px;
background-image: url(../images/banner.gif);
background-repeat: no-repeat;
border: 1px ridge #4C4C4C;
}

#nav {
background-image: url(../images/nav.gif);
background-repeat: no-repeat;
height: 22px;
}

#nav ul{
padding: 0;
margin: 0;
}

#nav ul li{
display:inline;
padding: 0;
margin: 2px;
}

#nav ul li a{
font-size: 80%;
color: #000;
background-color: transparent;
padding: 0 18px 0 18px;
text-decoration: none;
text-align: center;
width: 7em;
}

#nav ul li a:hover, #nav ul li a:focus{
background-color: transparent;
color:#339900;
}

#leftcol{
margin-top: 20px;
margin-left: 5px;
float: left;
width: 170px;
border-top: 1px ridge #4C4C4C;
}

#leftcol ul{
padding: 0;
margin: 0;
background-color: transparent;
list-style-type: none;
font-size: 90%;
border: 1px ridge #4C4C4C;
}

#leftcol ul li{
padding: 0;
margin: 0;
}

#leftcol ul li a{
font-size: 90%;
color: #000;
background-color: #FFF;
text-decoration: none;
padding: 4px 0 6px 4px;
height: 1%;
display: block;
}

#leftcol ul li a:hover, #leftcol ul li a:focus{
background-color: #FFF;
color:#339900;
}

#leftcol p{
font-size: 95%;
padding: 4px;
background-color:#8FD720;
border-left: 1px ridge #4C4C4C;
border-right: 1px ridge #4C4C4C;
color: #FFFFFF;
}

#content {
margin-top: 20px;
margin-left: 200px;
}

#content p {
font-size: 80%;
margin: 20px;
}

#content h1 {
font-size: 130%;
color: #003366;
padding: 0;
margin-left: 20px;
}

#content h2 {
font-size: 110%;
padding: 0;
margin-left: 20px;
}

.leftimage {
float: left;
margin: 0 10px;
border:1px ridge #4C4C4C;
}

.rightimage {
float: right;
margin: 0 10px;
border: 1px ridge #4C4C4C;
}

.container {
width: 99%;
float: right;
background-color: #FFF;
border: 1px ridge #4C4C4C;
}

#tl {
position:relative;
top: -3px;
left: -25px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#tr {
position:relative;
top: -3px;
left: 556px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#bl {
position:relative;
top: 425px;
left: -25px;
margin: 0px;
padding: 0px;
z-index: 100;
}
#br {
position:relative;
top: 100px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

.clearit {
clear: both;
}

#footer {
background-color: #FFF;
border: 1px ridge #4C4C4C;
text-align:center;
color: #000;
clear: both;
}

#footer p {
font-size: 70%;
padding: 10px;
margin: 15px;
border-top: 1px solid #8FD720;
border-bottom: 1px solid #8FD720;
}

[VVebbie]

That's a really ugly way to do it.

Keep in mind that the following is not a complete example, it is just to give
you the idea.

If you have trouble with IE rendering the bottom-aligned background images
strangely, you need to put a border around the outermost element. I have no
idea why this works (or doesn't work, to be more precise).

<html>
<style>
.container
{
}
.container div
{
background-image: url('border.jpg');
background-repeat: repeat-x;
background-position: left top;
}
.container div div
{
background-position: left bottom;
}
.container div div div
{
background-repeat: repeat-y;
background-position: left top;
}
.container div div div div
{
background-position: right top;
}
.container div div div div div
{
background-image: url('topleft.jpg');
background-repeat: no-repeat;
background-position: left top;
}
.container div div div div div div
{
background-image: url('topright.jpg');
background-position: right top;
}
<style>
<div class="container">
<div><div><div><div>
<div><div><div><div>
Content here
</div></div></div></div>
</div></div></div></div>
</div>
</html>

[sabafana]

I don't know what you mean. You can see the corner pics but there positioning are different from IE to Firefox to Opera.

[VVebbie]

The technique described above uses background images to create the borders of
your container, and uses simple CSS properties to position them. It's really
alot more elegant than using tables, which in turn is more elegant than what
you're trying to do. :P

[elliot@carto]

Have a look at this guys solution, called "Nifty Corners"

[url]http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html[/url]

He uses a combo of CSS and javascript to create rounded corners without using
graphics...