I have problems creating round corners with CSS

 

The right top, right bottom and left bottom corners show up on the most outer part of the website. See attachment

 

Here is the html code

<div id="contact">
<span class="trr"></span><!--top_right-->
<h2>Contact Us</h2>
<p>Call us <strong>Toll Free at  -  -8888</strong> or <strong>Toronto Local 555-555-5555</strong>, send us an <a href="../html/contact_form.html">email</a> or go to our <a href="../html/contact_us.html">Contact Us</a> page for more details.
</p>
<span class="bll"></span><!--bottom_left-->
<span class="brr"></span><!--bottom_right-->
</div>

 

CSS code

   #contact {
background-color: #DDDDDD;
width: 165px;
padding-left: 21px;
padding-right: 10px;
padding-top: 1px;
float: right;
margin-top: 10px;
background-image: url(../images/tl.gif);
background-repeat: no-repeat;
   }

.trr, .bll, .brr {
width : 20px;
height : 20px;
display : block;
margin-bottom : -1px;
position: absolute;	
}

/* change position and image: top-right */
.trr {
background : url(../images/tr.gif) no-repeat;
top : 0;
right : 0;
}

/* change position and image: bottom-left */
.bll {
  background : url(../images/bl.gif) no-repeat;
  bottom : 0;
  left : 0;
}

/* change position and image: bottom-right */
.brr {
  background : url(../images/br.gif) no-repeat;
  right : 0;
  bottom : 0;
}

 

Any ideas why?

I'd use CSS3 border-radius property to do that instead of wrappings divs/spans. It degrades nicely to plain square for older browsers and keeps your code clean and tidy.

Hi,

 

Look at this example, I think it can help you in a certain way: Link

 

CSS3 is going to help us in a few years!

 

Regards

I use css3 too, alot easier.

 

but for the image way, you need to make the containing div relative.

 

so add

 

position:relative;

 

to

 

#contact {}

Thank you for the help guys. I'm new to CSS.... I did look in to CSS3 border-radius property but it does not work with EI

 

I'll stay with the images for now

If you're going to rely on images, which is OK, you should replace them with a sprite. Easily done: fewer server requests.

Can you tell me what a sprite is? And how can I do it?

Sprites/Matrix's are pretty simple (sprites tend to be single column/row and matrix's tend to combine the too, sprites are easier to maintain).

 

This outlines the idea, whilst the example differs, it still applies.

 

http://www.cardeo.ca/2008/how-to-create-a-single-image-css-navigation-matrix

 

http://superfluousbanter.org/archives/2004/05/navigation-matrix/

 

So rather than the browser sending out 4 requests (one for each corner image) it can send out one request (for all four corners).

Thank you!