CSS: Trying to make left and right borders using background images, Div tags help!

I'm trying to create a box with rounded corners and borders. I'm having a problem with getting the borders to show up. I'm using a bunch of nested div tags. Is this bad practice?

I'm currently trying to add the left and right borders using images that are very short but very long, and to repeat them. For some reason they're not appearing. Can you please help?

Below is some code that basically has a navigation bar. I'm trying to put rounded corners on top (which is working) and the top border is showing up. The problem is that in IE the left border shows up, but in Firefox it does not. I haven't even gotten to the right border yet.

Any ideas?

Thanks =)

HTML code:

<div class="nav_main">
<div class="border_nav_main">
<div class="border_top_trans">
<div class="border_top_left"><img src="img/corner_tl.gif"></div>
<div class="border_top_right"><img src="img/corner_tr.gif"></div>
</div>
<div class="nav_main_selected">Home</div>
<div class="nav_main_unselected">You</div>
<div class="nav_main_unselected">Notes</div>
<div class="nav_main_unselected">Tags</div>
<div class="nav_main_unselected">Browse</div>
<div class="nav_main_unselected">Search</div>
</div>
</div>


CSS code:

div .nav_main {
position: relative;
float: left;
clear: both;
display: inline;
background: url(../img/nav_background.jpg) repeat top left;
width: 100%;
}

div .nav_main_selected, div .nav_main_unselected {
float: left;
}

div .nav_main_unselected, div .nav_main_selected{
font-size: 12pt;
font-weight: bold;
text-align: center;
margin-top: .2em;
margin-left: 20px;
margin-right: .5em;
margin-bottom: 0;
width: 6em;
}

div .nav_main_selected{
background: white;
color: #003366;
}

div .nav_main_unselected{
color: white;
}

div.border_nav_main{
background: url(../img/border_left.gif) repeat;
height: 100%;
width: 100%;
clear: both;
}

Is this bad practice? Yes.
A more appropriate approach would be to use CSS to implement these as background images. Now, since CSS only allows one background image for each element you'll going to need multiple elements to hold all the necessary images; the key here is to make the most use of the existing elements necessary for proper markup and to avoid adding superfluous elements for visual effects as much as possible.

These articles on ALA give you an idea of how to approach this: Onion Skinned Drop Shadows (http://www.alistapart.com/articles/onionskin/), CSS Design: Creating Custom Corners & Borders (http://www.alistapart.com/articles/customcorners/) and ... part II (http://www.alistapart.com/articles/customcorners2/).