rounded corners

chrisgm187 · December 4th, 2006, 07:29 AM

I recently purchased Pro css for web designers. This book is great and I have learned a lot of helpful tips. I am now trying to create round corners on a box. I am copying the code straight out the book including the hacks but I am not achieving the right results. the images appear very wide and the box is four times longer then it should be in fire fox and there is no change what so ever in IE.

Here is the xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.W3.org/TR/xhtml1/DTD/xhtml1-transtional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>roundbox</title>
<link rel="stylesheet" type="text/css" href="boxfw.css" />
</head>
<body>
<div id="sidebar">
<div class="box">
<h2>box12334566</h2>
<p>first sentence for the lovely box thats round
</p>
<p>
the second box well not the box but the sentece because i am trying to set up a box you know what i mean.</p>
<p>the thrid sentence very importantm one thinks because the first div comes after it
...........................................
yeeeeeeeeeeeeeeeeeeeee</p>
</div>
</div>
</body>
</html>

and here is the css
#sidebar {
width: 200px;
}

.box {
background-color: #f5ece3;
border: 2px solid #eld4c0;
padding: 8px;
}

.box:before {
content: url(box-top.gif);
display: block;
line-height: 0.1;
margin: -10px -10px -22px -10px;
}

.box:after {
clear: both;
content: url(box-btm.gif);
display: block;
line-height: 0.1;
margin: 0px -10px -10px -10px;
}

/*.box h2 {
background: transparent url(box-top.gif) no-repeat top left;
margin: -10px -10px 0 10px;*/
}

.box > h2 {
background-image: none;
margin-top: 0; 0 auto 0;
padding: 0;
}

thanks for looking and advice would be helpful.

fred_treptow · January 30th, 2007, 01:16 AM

I am having some problems with the code in the book as well.

I did notice a couple of things in your code.

I did not have this commented out.
/*.box h2 {
background: transparent url(box-top.gif) no-repeat top left;
margin: -10px -10px 0 10px;*/
}

you have an extra semi colon on the margin-top property after the first 0

.box > h2 {
background-image: none;
margin-top: 0; 0 auto 0;
padding: 0;
}

here is the way I translted the code:

/* styles for rounded corner fixed width box */
#sidebar
{
    width: 200px;
}
.box
{
    background-color: #f5ece3;
    border: 2px solid #eld4c0;
    padding: 8px;
}
.box:before
{
    content: url(box-top.gif);
    display: block;
    line-height: 0.1;
    margin: 0 -10px -10px -10px;
}
.box:after
{
    clear: both;
    content: url(box-btm.gif);
    display: block;
    line-height: 0.1;
    margin: 0 -10px -10px -10px;
}
.box h2
{
    margin-top: 0;
}
/* added for explorer */
.box h2
{
    background: transparent url(box-top.gif) no-repeat top left;
    margin: -10px -10px auto -10px;
    padding: 10px 10px 0 10px;
}
/* sets the h2 back from explorer hack using child selector > */
.box > h2
{
    background-image: none;
    margin: 0 0 auto 0;
    padding: 0;
}

if you get it working let me know, I tried in IE and it doesn't work