Text/Links background should be transparent over a gradient background but is in white

Question

I have a small problem. I'm starting to devise a new site for myself, www.dvpwebdesign.com. I'm currently just using html and css on it. The problem i have is IE, my intro page has a repeated gradient background, with links/text over it. All works fine on Safari, Firefox, but not the dreaded IE, which shows a white background behind the text. The rest of the screen has the gradient background correctly. I know you are supposed to use background-color:none, which i did do. I also tried background-color:transparent, all to no avail. If anyone can help i'd be very appreciative? Below is the CSS, you can get the html from the site which is live, thanks in advance:

body {
margin: 0;
padding: 0;
background-color: none;
width:1000px;
background-image: url(gradient4.jpg);
background-repeat: repeat-x;
}



 #menu a{
    color:#a0a0a0;
    font-weight:normal;
    text-decoration:none;
    font-size:14px;
    margin-left:10px;
    margin-top:-35px;
    font-family: Skia;


    }
#menu a span.two{
    color:#33ccff;
    cursor:pointer;
        font-size:14px;
        font-weight:500px;
    font-family: Skia;

}

     #menutwo a{
    color:#9966ff;
    font-weight:normal;
    text-decoration:none;
    font-size:12px;
    margin-left:10px;
    margin-top:-35px;
    font-family: Skia;

}
#menutwo a span.two{
    color:#660099;
    cursor:pointer;
        font-size:12px;
    font-family: Skia;

}
#menuthree a{
    color:#c8c8c8;
    font-weight:normal;
    text-decoration:none;
    font-size:80px;
    font-family: Skia;


    }
#menuthree a span.two{
    color:#33ccff;
    cursor:pointer;
        font-size:80px;
    font-family: Skia;

}

     #menufour a{
    color:#b8b8b8;
    font-weight:normal;
    text-decoration:none;
    font-size:42px;
    font-family: Skia;


}
#menufour a span.two{
    color:#339999;
    cursor:pointer;
        font-size:42px;
    font-family: Skia;
}

     #menufive a{
    color:#a8a8a8;
    font-weight:normal;
    text-decoration:none;
    font-size:22px;
    font-family: Skia;


}
#menufive a span.two{
    color:#0066ff;
    cursor:pointer;
        font-size:22px;
    font-family: Skia;
}



ul#menu {
width : 1000px;
list-style-type : none;
position : relative;
margin-top:20px;
margin-right:230px;
float: right;
display:inline;
    font-family: Skia;

letter-spacing: 1px;
}

#menu li {float: right;                
display:inline;}

ul#menutwo {
width : 1000px;
letter-spacing: 1px;
margin-top:-10px;
margin-bottom:20px;
list-style-type : none;
position : relative;
float: right;
display:inline;
font-size:24px;
    font-family: Skia;
margin-right:180px;
}

#menutwo li {float: right;                
display:inline;}

ul#menuthree {
width : 1000px;
letter-spacing: 1px;
list-style-type : none;
position : relative;
float: left;
display:inline;
    font-family: Skia;

top: 300px;
}

#menuthree li {float: left;                
display:inline;}

ul#menufour {
width : 1000px;
letter-spacing: 1px;
list-style-type : none;
position : relative;
float: left;
display:inline;
    font-family: Skia;

top: 320px;

}

#menufour li {float: left;                
display:inline;}

ul#menufive {
width : 1000px;
letter-spacing: 1px;
list-style-type : none;
position : relative;
float: left;
display:inline;
    font-family: Skia;

top: 340px;

}

#menufive li {float: left;                
display:inline;}

Answer 1

Some of your jQuery shenanigans must be applying the background colour as an inline style.

This is what I get in IE 8's developer tools for the spans:

filter: alpha(opacity=100); ZOOM: 1; background: #fff;

Update: here it is. In fadelinks.js

var bgcolor = "#fff";   // unfortunately we have to set bg color because of that freakin' IE *!$%#!!?!?%$! 
                        //please use the same background color in your links as it is in your document.