CSS Positioning does not work

I've been aggravated with this problem for the past 2 hours. Its unbelievable.

I am creating a simple left column with three components, header background, middle repeating white background, and bot background. For some stupid reason the middle repeating background keeps overlapping the header. It won't move down when I use "background-position".

Here's my css code:

.leftcolumn .block{

background-color:#FFFFFF;

backgro开发者_运维知识库und-image: url([url]http://www.trixmasta.com/softpak/images/lnav_center.png);[/url]
background-position:0px 10px;
background-repeat: repeat-y;

width:205px;
}


.leftcolumn .block .wrap {

background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_header.png);[/url]
background-repeat: no-repeat no-repeat;
width:205px;
padding-left:0px;
padding-top:10px;

}


.leftcolumn .block .bot {
background-image: url([url]http://www.trixmasta.com/softpak/images/lnav_bot.png);[/url]
background-repeat: no-repeat repeat;
background-position: 0px 51px;
}

My HTML:

        <div class="block">

            <div class="wrap">

            <div class="navigation">
                <ul>
                <li><a href="#" title="">Link 1</a></li>
                <li><a href="#" title="">Link 2</a></li>
                <li><a href="#" title="">Link 3</a></li>

                </ul>
            </div>
            </div>
            <span class="bot"> </span>

        </div>

background-position wont't move the actual elements, it only where it starts getting the image. An example would be with a sprite image, you set a background position to get a over state then another for a hover state. You may want to try using actual positioning(i.e top, bottom, left, and right), or try and use margins to position it how you want. As to iamserious' comment, adding content and display:block; to the header would also help.

Is this what you're looking for?

http://jsfiddle.net/7TVkh/