Background Image

I'm trying to add a background image to a div but it's not working. I want to add it to my dateBottom class.

<div id="d6_28" onclick="return door(this);">
<div class="dateTitle">July 28^th</div>

<div class="open" >
Give me feedback through the feedback link. Many more features are too come as I figure out a way to impliment them. Enjoy.
</div>

<div class="dateBottom"></div>

</div>


Style:

.dateTitle{
background-image:url('dateTop.gif');
background-repeat:no-repeat;
color:#006699;
}

.dateBottom{
background-image:url('dateBottom.gif');
color:#006699;
}

.open{
background-image:url('dateMiddle.gif');
background-repeat:repeat;
}

.closed{
}


The dateBottom class isn't getting the dateBttom.gif, instead it is getting the dateMiddle.gif. I've tried with and without text in the dateBottom div. I can't figure out what I've done wrong.

Linkage : http://troop1910.ithium.net

I got it to display in FF by adding a height and width to the .dateBottom DIV the same dimensions as the image..
.dateBottom{
height: 45px;
width: 555px;
background-image:url('dateBottom.gif');
color:#006699;
}


Nite

It's an empty div, so there's no room for the background image to be displayed.

Change this:

.dateBottom{
background-image:url('dateBottom.gif');
color:#006699;
}

To this:

.dateBottom{
background:url('dateBottom.gif') no-repeat top left;
color:#006699;
height: 45px;
}

The "no-repeat" and the positioning are just in case some content gets added; if the div expands the bottom image won't tile.

Doh, that's what I get for typing too much :D

Height! That's it. Why didn't I think of that. I had the min-width set to 100%.
Thanks guys. http://img108.exs.cx/img108/1172/a4nvictory.gif