css background repeat is not working - css

Question

I have a css class called navigation which will hold some link and when i'll add some extra link it will go from left to right and then again it'll come to bottom of the LHS. i use background-repeat: repeat-y; and height:auto; but the image is not repeating instead of a white background is coming. I'm working on IE8. the css codes are given below:
#navigation {
background: url(../images/custom/lite/navigation_bg.gif);
border-top: 7px solid #455660;
height: auto;
background-repeat:repeat-y;
}
#navigation ul,
#add-page {
float: left;
}
#navigation a {
color: #FFF;
display: block;
font: 14px/56px Arial,Helvetica,sans-serif;
font-weight:bold;
height: 50px;
padding: 0 24px;
text-decoration: none;
}
#navigation a:hover {
color: #000;
}
#navigation .selected a {
color:#000
}
#navigation .selected a {
font-size: large;
text-transform: uppercase;
}

Answer 1

#reuben, you given float in your ul so you have clear it #navigation
like this:
#navigation {
overflow:hidden;
}
may that's help you

Answer 2

What does your HTML look like? You say you have a class called navigation but your selector syntax is that of an ID.
For your CSS to work as shown here, you should have something like
<div id="navigation">...</div>

Answer 3

change your css to the below:
.navigation {
background: url(../images/custom/lite/navigation_bg.gif);
border-top: 7px solid #455660;
height: auto;
background-repeat:repeat-y; }
.navigation ul,
#add-page {
float: left; }
.navigation a {
color: #FFF;
display: block;
font: 14px/56px Arial,Helvetica,sans-serif;
font-weight:bold;
height: 50px;
padding: 0 24px;
text-decoration: none; }
.navigation a:hover {
color: #000; }
.navigation .selected a {
color:#000 }
.navigation .selected a {
font-size: large;
text-transform: uppercase; }