CSS IE6 repeat-y problem

hey, im having problem in IE6 repeating my background when my content area/div expands, every other browser works fine! im bit new to css still learning the in;s and outs if any one can tell me how to fix or has solution then I would really appreciate!

here is the link to the site. http://www.salefest.com.au/askmenow/index2.html


you will see the blank space under the orange background in IE 6 but background shows in firefox etc..

heres the CSS (little bit messy because ive tried a few things)
cheers!

* {
margin: 0;
padding: 0;

}

body {
text-align:center; /* IE6 needs this to center the layout in the browser window */

background: #Ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #6B6B6B;
background-color: #Ffffff;
}
p{
margin-bottom: 1.5em;
line-height: 170%;
text-align: justify;
}


blockquote {
margin-left: 3em;
margin-right: 3em;
}

a {
color: #999999;
text-decoration: none;
}

a:hover {
text-decoration: none;
color: #666666;
}



/* Wrapper */
#wrapper {
width: 100%;

}

#wrapper2 {
width: 100%;
background: url(images/bg_orange.jpg) repeat-x;


margin-top:0;
}
#wrapper3 {
width: 799px;
background: url(images/top_box.jpg) no-repeat;
background-position:left top;
margin:0 220px;

}


/* Header */
#header {
margin: 0 auto;
width: 734px;
padding-top:17px;
padding-bottom:10px;


/*margin-right: 0.183em;*/
}
#account {
float:right;
margin: 0 auto;
width: 200px;
padding-top:35px;
padding-right:45px;
height: 50px;
text-align:right;
font-size:11px;

}
#account a {
color:#EB8B1D;
font-size:11px;
}
#account a:hover{
color:#ffffff;
background-color:#777777;
font-size:11px;
}
#links {

margin: 0 auto;
width: 670px;
height:30px;
padding-left:35px;
text-align:center;
/*margin-right: 0.183em;*/
}


/* Page */
#page {
margin-top:0;


}
#top_box {
font-size:0;
display:block;
}
#left_box{

height:189px;
width: 78px;
margin:0;
float:left;

}

#center_rightleft{
overflow:visible;
}
#center_content{

width: 643px;
float:left;
background-color:#FFFFFF;
padding:0 0 0 0;
}
#right_box{
padding-right:0px;
height:189px;
width: 60px;
margin:0;
float:left;
line-height:normal;
}
#repeater{
width:100%;
background: #fff url(images/repeat.jpg) top left repeat-y;
display:block;
overflow:visible;
height:100%;
padding:0;
margin:0;

}
html>body {
min-height:100%;
height:auto;

}

* html #repeater{

min-height: 100%;

}
#base
{
margin: 0 auto;
padding-bottom:0px;
line-height: normal;
height:110px;


}




#widebar {
color:#999999;
margin: 0 auto;
width: 705px;
height:38px;
font-size:11px;

position:relative;
text-align:center;
padding-right:30px;

}
#widebar p{
color:#999999;
font-size:11px;
text-align:center;
position:relative;
margin:0;
}
#widebar a:hover{
color:#ffffff;
background-color:#777777;
font-size:11px;
text-align:center;
position:relative;


}
#widebar a{
color:#EB8B1D;
font-size:11px;
text-align:center;
position:relative;


}

 

While none of these may be causing the problem, it's always silly to try to track down a bug when there's some invalid code floating around:
http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Even if the problem doesn't fix itself after fixing these, it at least means we're not wasting time trying to find the bug-- they just show up easier.

Being that it's only a problem in IE6 (I didn't actually check to see if IE6 was the only browser with the problem), it IS more likely to be an IE6 bug, but still...

I didn't check your CSS, but make sure that validates too.

 

Thanks for that mate,

I fixed the source so now it is vaild xhtml transitional. Still has the problemo
Do you think it will make a difference if i change it to xhtml strict?


I think i must be missing some IE6 hack in my css,?


cheers

 

Asa far as this goes, there should be no difference between strict and transitional (but there's really no reason to stay transitional nowadays) : )

I do think this is an IE6 thing, a specific bug... it might be disappearing background bug... I've never actually run across it before because the only time stuff disappeared for me in IE6, it was a matter of triggering Haslayout.

I remember finding a page about the disappearing background IE6 bug several months earlier, but now I'm only finding the disappearing list background bug, which isn't exaclty what you have (but is related and I wouldn't be surprised if the solution for that one would work for you too).

Google: IE6 disappearing background bug

Most of the solutions still involve giving Layout to either the element in question or a parent. Which is why I keep thinking your solution lies in that direction.

You may need to set haslayout on some parent of that div (position: relative or something). You already have it on the div in quesiton by setting width: 100% manually.

And to tell the truth, it may be that I've never personally run across this bug because the way I code, I wouldn't use seperate divs for each piece of the image.
The less code there is, the less there is to break (quoted from deathshadow). But that's a larger issue and up to you personally...