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

Trouble is in fadelinks.js:

http://www.dvpwebdes...js/fadelinks.js

This script assigns background color #FFF to SPAN elements

<span class="one" style="filter: alpha(opacity=100); ZOOM: 1; background: #fff;" jQuery1276936238023="5">

 

This is a code of the script:

/*
* fadeLinks
* jquery based script for color fading inline text links 
* author: Alen Grakalic
* more info on http://cssglobe.com/
*
* Copyright (c) 2008 Alen Grakalic (cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
*/


this.fadeLinks = function() {	

var selector = "a"; //modify this line to set the selectors
var speed = "slow" // adjust the fading speed ("slow", "normal", "fast")

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. 

$(selector).each(function(){ 
	$(this).css("position","relative");
	var html = $(this).html();
	$(this).html("<span class=\"one\">"+ html +"</span>");
	$(this).append("<span class=\"two\">"+ html +"</span>");		
	if($.browser.msie){
		$("span.one",$(this)).css("background",bgcolor);
		$("span.two",$(this)).css("background",bgcolor);	
		$("span.one",$(this)).css("opacity",1);			
	};
	$("span.two",$(this)).css("opacity",0);		
	$("span.two",$(this)).css("position","absolute");		
	$("span.two",$(this)).css("top","0");
	$("span.two",$(this)).css("left","0");		
	$(this).hover(
		function(){
			$("span.one",this).fadeTo(speed, 0);				
			$("span.two",this).fadeTo(speed, 1);
		},
		function(){
			$("span.one",this).fadeTo(speed, 1);	
			$("span.two",this).fadeTo(speed, 0);
		}			
	)
});
};

$(document).ready(function(){	
fadeLinks();
});

 

Look at

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. 

So i guess this means unless you have a white background then the fadelink.js is pretty pointless! Thanks so much for finding the error Lev. Can i ask, how did you manage to find the code in my site, i thought you could only see the source code for html, can you see code for any files used in a website ie CSS, Javascript, etc?

I've used standard FireFox 3.6 featuers: Ctrl-U - HTML and source of the page opens in the new window. So you can see all code of this page, including links to all external files: CSS, JavaScript, images. Now you can click any of these links for to upload source code of CSS or JS file just right to this window.