CSS Problem With Repeating Image

[tlyoung99]

I have been working on this issue and can not seem to make any headway. Everything is beginning to run together. Any help would be greatly appreciated.

Basically, my page looks just as I want it to in FireFox, but I can not get IE to repeat my images vertically. I need a background image to tile vertically so that it is the same height as the main column of the page. I am using CSS and tables for the layout. I should have made the jump, but I'm trying to get the site looking correct since it is already live. I have tried so many different changes, that I'm really starting to lose it!

My test URL is www.truckingshow.com/index2.htm.

Relevant CSS:

 /* CSS Document */ 
td {font-family: Geneva, Arial, Helvetica, san-serif}
 
/* commented backslash hack v2 \*/ 
html, body {height: 100%}
/* end hack */ 
 
/* Scroll bar colors visible only in IE5.5+ */
body {
    margin: 5px 0px 0px;
    padding: 0px;
    border: none;
    background: #000 url(/templates/template_images/bg_faded.gif) repeat-x fixed left bottom;
    text-align: center;
    text-decoration: none;
    scrollbar-3dlight-color:#d1d7dc;
    scrollbar-arrow-color:#006699;
    scrollbar-darkshadow-color:#98aab1;
    scrollbar-face-color:#dee3e7;
    scrollbar-highlight-color:#ffffff;
    scrollbar-shadow-color:#dee3e7;
    scrollbar-track-color:#efefef;
    height: 100%;
}
#wrapper {
    background-color: #ccccff;
    margin: 0 auto;
    text-align: left;
    width: 148px;
    min-height: 100%
}
* html #wrapper {
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center
}
/*LHS Navigation*/
.nav a {
    display: block;
    padding: 0px 0px 0px 0px;
    width: 148px;
    height: 18px;
    overflow: hidden;
    background: transparent URL(/templates/template_images/nav.jpg) top left no-repeat;
    text-decoration: none;
    font-family: Geneva, Arial, Helvetica, san-serif;
    color: #333333;
    font-weight: bold;
    font-size: 14px;
    text-align: left;
    text-indent: 4px;
} 
 
.nav a:hover {
    background-position: -148px;
    text-decoration: none;
    color: #FFFF00
} 
.nav a:visited {    
    text-decoration: none;
    font-weight: bold;
    font-size: 14px
} 
 
.bg_rep_LHS {
    background-image: url(/templates/template_images/r18_c2.gif);
    background-repeat: repeat-y;
    height: 100%
}
.bg_rep_RHS {
    background-image: url(/templates/template_images/3col_r14_c10.jpg);
    background-repeat: repeat-y;
    height: 100%
}
 

If anyone could help, I would really appreciate it.

Thanks.

[Niheel]

I find it easier to breakdown the background properties.

Example:

Change

background: #000 url(/templates/template_images/bg_faded.gif) repeat-x fixed left bottom;
 

to

 
background-color: #000000;
background-image: url(/templates/template_images/bg_faded.gif);
background-repeat: repeat-x;
background-position: left bottom;
 

Looks like a lot of uncessary code, but debugging is lot easier.