China Musings

Maybe my explanation o the Roundrect CSS technique was not so clear. So, here is some code. My apologies to the person that invented this, if anyone can find the original link, please let me know.


.RoundRect{
margin-top: 20px;
background-color:ff0000;
width:700px;
position:relative;
margin-left:auto;
margin-right:auto;
}
.RC1 {
background-image:url(images/roundrect.png);
background-repeat:no-repeat;
width:10px;height:10px;
position:absolute;
}
.RC2 {
background-image:url(images/roundrect.png);
right:0px;background-repeat:no-repeat;
background-position:right top;
width:10px;height:10px;
position:absolute;
}
.RC3 {
background-image:url(images/roundrect.png);
bottom:-1px;/*this is the IE value*/
background-repeat:no-repeat;
width:10px;
height:10px;
background-position:0 bottom;
position:absolute;
}
/* hack for IE... don't know why it is so different. */
/* IE adds an extra pixel at the bottom, while Firefox */
/* lets 0 be 0, well for this height anyway. */
/* Since IE does not understand the html>body selector, */
/* this style directive only applies to firefox. */
html>body .RC3 {
bottom:0px;
}
.RC4 {
background-image:url(images/roundrect.png);
bottom:-1px;
right:0px;
background-repeat:no-repeat;
background-position:right bottom;
width:10px;height:10px;
position:absolute;
}
/**/
html>body .RC4 {
bottom:0px;
}
.RR_Content{padding:15px;}