Box won't appear

HTML & CSS
1

I’m trying to have two horizintal rounded-corner boxes appear on the page, but box no. 2 doesn’t appear. Any ideas? Thanks

CSS code:

.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}

        .topLeft {top:0; left:0; background-position:-1px -1px;}
        .topRight {top:0; right:0; background-position:-19px -1px;}
        .bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
        .bottomRight {bottom:0; right:0; background-position:-19px -19px;}

#type1 {background-color:#CCDEDE;}
    #type1 .corner {background-image:url(../images/corners-type1.gif);
    
#type2 {background-color:#CDDFCA;}
    #type2 .corner {background-image:url(../images/corners-type2.gif);

HTML code:

<div class="roundedBox"></div>
<div class="roundedBox" id="type1">
    <strong>My content in roundedBox1</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

<div class="roundedBox" id="type2">
    <strong>My content in roundedBox2</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>
2

You have 2 missing closing brackets :slight_smile:


#type1 .corner {
    background-image:url(../images/corners-type1.gif);
[B]}[/B]
#type2 {
    background-color:#CDDFCA;
}
#type2 .corner {
    background-image:url(../images/corners-type2.gif);
[B]}[/B]

Note that in IE6 the right and bottom absolute images will be 1px out when an odd pixel distance is covered.

There are better ways to do rounded boxes.

http://battletech.hopto.org/html_tutorials/eightcorners/template.html
http://www.pmob.co.uk/temp/round-transparent-inner-fade.htm