PDA

View Full Version : Help with rounded corners/css



chrisjchrisj
Jul 4th, 2009, 05:04 PM
I added code to my index page and to my css file, but the rounded corner box has issues (see attched image). Can you help me renmedy this?

I added this to my index page:

<div class="roundedcornr_box_878430">
<div class="roundedcornr_top_878430"><div></div></div>
<div class="roundedcornr_content_878430">
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="roundedcornr_bottom_878430"><div></div></div>
</div>

And I added this to my css:

/* Rounded Corner Containers */
.roundedcornr_box_878430 {
background-image: url(../images/roundedcornr_878430_tl.png);
background-repeat: repeat-x;
background-position: top left;
}
.roundedcornr_top_878430 {
background-image: url(../images/roundedcornr_878430_tr.png);
background-repeat: repeat-x;
background-position: top right;

}
.roundedcornr_bottom_878430 {
background-image: url(../images/roundedcornr_878430_bl.png);
background-repeat: repeat-x;
background-position: bottom left;
}
.roundedcornr_bottom_878430 div {
background-image: url(../images/roundedcornr_878430_br.png);
background-repeat: repeat-x;
background-position: bottom right;

}
.roundedcornr_content_878430 {
background-image: url(../images/roundedcornr_878430_r.png);
background-repeat: repeat-x;
background-position: top right;
}

.roundedcornr_top_878430 div,.roundedcornr_top_878430,
.roundedcornr_bottom_878430 div, .roundedcornr_bottom_878430 {
width: 100%;
height: 15px;
font-size: 1px;
}
.roundedcornr_content_878430, .roundedcornr_bottom_878430 {
margin-top: -19px;
}
.roundedcornr_content_878430 { padding: 0 15px; }

And it looks bad, please see attached image. What do i need to correct? Any help will be appreciated.

effpeetee
Jul 4th, 2009, 05:16 PM
This site has help (http://exitfegs.co.uk/Sources.html)on the right hand side.

We really need to see all your code. Or better still a link.

Frank