IE wont shows white background instead of transparent

Get Started
1

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;}
2

With javascript disabled, the background colour appeared behind the text as desired in IE7 and IE8. It’s not a CSS problem, it’s in your javascript somewhere.

Also, when I hovered over the text in IE8 (with javascript on) the text appeared ‘doubled’ below where it was supposed to be.

3

Thanks fattyjules, another persons mentioned the javascript too, could be fadelinks.js at fault. I’ll check it out.
That ‘doubling’ over problem was going to be my next question, any tips gratefully received. Have a nice weekend.

4

I went to check it again, but fadelinks.js is gone…?

5

I havent changed anything, i’ve just checked and its still there.

6

I’ve just noticed that your page calls fadelinks.js, but the file is called fadeLinks.js (note the uppercase L). It’s not getting called in Chrome or IE8 for me. Maybe your browser has cached it?

7

Still none the wiser, i found fadelinks.js has set the background-color as white, trouble is what do i change to as i’m not using a block color background but a gradient background. Can i set to var bgcolor = “none”?