CSS text shows up under my image

I have the following code, but for some reason the text that I want to display in the footer displays under the images that I have there, how do I get the text to show up ontop of all the images?

CSS

Code:

---

#footer {
        margin : 0 -10px 0 -8.5px;
        width: 100%;
        background : url('FooterBorder.gif') repeat-x;
        height : 36px;
        position: absolute;
       
}

#footer p{
    margin : -36px;
    text-align : center;
        color: #003466;
        font-family: Corbel,sans-serif;
        font-style: oblique;
        border: medium double rgb(250,0,255);
}

#rbtop div { background: url(TopLeft.gif) no-repeat top left; }
#rbtop { background: url(TopRight.gif) no-repeat top right; }
#rbbot div { background: url(BottomLeft.gif) no-repeat bottom left; }
#rbbot { background: url(BottomRight.gif) no-repeat bottom right; }

#rbtop div, .rbtop {
height: 20px;
font-size: 1px;

}
#rbbot div, .rbbot {
height: 36px;
font-size: 1px;
}

---

HTML

Code:

---

<div id="footer">
        <div id="rbbot"><div></div></div></div>
        <p>Copyright &copy; 2008 - All Rights Reserved        </p>
        </div>
                       
        </div>

---

Add position: relative; to #footer p - you can also add z-index: 1; just to be sure, if you want.

Merri, I added both of those to it and it still doesn't show up.

From what you've given, your HTML structure is broken, you close it many times so that the P element isn't even within the #footer - and #rbtop is missing. So, check the order you open and close elements.

Firefox has DOM inspector and Firebug extension that can help a lot in this kind of situation.