Gradient baggrund med CSS - firefox/mac problem
Hej, jeg skal lave en gradient baggrund på en menu, som ikke må indeholde et baggrundsbillede og det skal virke i Firefox. Jeg har det til at virke i IE men Firefox driller og strækker det underligt. Håber nogen kan hjælpe.KODE:
___________________________
På selve siden;
<div class="gradient FFFFFF CDCDCD vertical bar">
Koden;
/*************************
Cross Browser Gradient Backgrounds
v1.0
Last Revision: 11.03.2005
steve@slayeroffice.com
please leave this notice in tact.
should you improve upon this code, please
let me know so that I may update the version
hosted on slayeroffice
--- to use --
reference this file (on your own server) as a javascript src
in the head of your document. give the elements
you want a gradient background applied to a class as such:
class="gradient 000000 ffffff horizontal"
See http://slayeroffice.com/code/gradient/ for more examples.
*************************/
window.addEventListener?window.addEventListener("load",createGradient,false):window.attachEvent("onload",createGradient);
function createGradient() {
if(!document.getElementById)return;
objArray = getGradientObjects();
if(!objArray.length) return;
for(i=0;i<objArray.length;i++) {
params = objArray[i].className.split(" ");
if(document.all && !window.opera) {
objArray[i].style.width = objArray[i].offsetWidth + "px";
params[3] == "horizontal"?gType = 1:gType = 0;
objArray[i].style.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType="+gType+",StartColorStr=\"#" + params[1] + "\",EndColorStr=\"#" + params[2] + "\")";
} else {
colorArray = createColorPath(params[1],params[2]);
x=0;y=0;
if(params[3] == "horizontal") {
w=Math.round(objArray[i].offsetWidth/colorArray.length);
if(!w)w=1;
h = objArray[i].offsetHeight;
} else {
h = Math.round(objArray[i].offsetHeight/colorArray.length);
if(!h) h =1;
w = objArray[i].offsetWidth;
}
makeGrandParent(objArray[i]);
tmpDOM = document.createDocumentFragment();
for(p=0;p<colorArray.length;p++) {
g = document.createElement("div");
g.setAttribute("style","position:absolute;z-index:0;top:" + y + "px;left:" + x + "px;height:" + h + "px;width:" + w + "px;background-color:rgb(" + colorArray[p][0] + "," + colorArray[p][1] + "," + colorArray[p][2] + ");");
params[3] == "horizontal"?x+=w:y+=h;
tmpDOM.appendChild(g);
if(y>=objArray[i].offsetHeight || x >= objArray[i].offsetWidth) break;
}
objArray[i].appendChild(tmpDOM);
tmpDOM = null;
}
}
}
function getGradientObjects() {
a = document.getElementsByTagName("*");
objs = new Array();
for(i=0;i<a.length;i++) {
c = a[i].className;
if(c != "") if(c.indexOf("gradient") == 0) objs[objs.length] = a[i];
}
return objs;
}
function createColorPath(color1,color2) {
colorPath = new Array();
colorPercent = 1.0;
do {
colorPath[colorPath.length]=setColorHue(longHexToDec(color1),colorPercent,longHexToDec(color2));
colorPercent-=.01;
} while(colorPercent>0);
return colorPath;
}
function setColorHue(originColor,opacityPercent,maskRGB) {
returnColor=new Array();
for(w=0;w<originColor.length;w++) returnColor[w] = Math.round(originColor[w]*opacityPercent) + Math.round(maskRGB[w]*(1.0-opacityPercent));
return returnColor;
}
function longHexToDec(longHex) {
return new Array(toDec(longHex.substring(0,2)),toDec(longHex.substring(2,4)),toDec(longHex.substring(4,6)));
}
function toDec(hex) {
return parseInt(hex,16);
}
function makeGrandParent(obj) {
disp = document.defaultView.getComputedStyle(obj,'').display;
disp == "block"?nSpan = document.createElement("div"): nSpan = document.createElement("span");
mHTML = obj.innerHTML;
obj.innerHTML = "";
nSpan.innerHTML = mHTML;
nSpan.setAttribute("style","position:relative;z-index:10;");
obj.appendChild(nSpan);
}