Προβλημα εμφανισης gradient background σε FF

ironwiller · 29 Ιουλίου 2007

πολυ καλημερα. αντιμετωπιζω μια μικρη προκλισουλα με τον FF για το background μιας σελιδας που φτιαχνω. το background θελω να ειναι gradient χωρις images. απλα να χρησιμοποιούνται 2 χρωματα. τοσο απλο.

βρηκα λοιπον ενα σχετικο script oπου δουλεψε μια χαρα στον IE. στον Opera δουλευει αλλα αλλαζει τις γραμματοσειρες, αλλα στον FF εμφανιζει ΜΟΝΟ το link του email.

παρακατω παραθετω σε 3 spoiler το gradient.css , το gradient.js και το index.html

gradient.css

/* generic styles to be applied to the demo objects */

.foo {

font:bold 1.1em comic sans;

position:relative;

}

.bar {

position:relative;

width:300px;

height:100px;

margin:5px auto;

padding:4px;

}

.baz {

position:relative;

width:350px;

height:5px;

display:block;

float:right;

font-size:1px; /* for IE, which wont allow for an element to be less high than the default font size. */

text-align:center;

}

/* following styles are unrelated to the specifics of the demo*/

* {

font-family:comic sans;

}

html {

background-color:#B8F9FF;

}

body {

width:95%;

height:100%;

border:0px solid #B8F9FF;

background-color:#B8F9FF;

padding:0px;

margin:auto auto;

font-size:1em;

}

ul li {

font:normal 0.85em comic sans;

}

code {

background-color:#ddd;

border:1px solid #c0c0c0;

padding:3px;

}

h1 {

font-size:1.1em;

border-bottom:1px solid #000;

}

h2,h3 {

font-size:0.9em;

clear:both;

}

p {

font-size:0.8em;

}

#so_credits {

position:relative;

margin:25px auto 0px auto;

width:350px;

font:0.7em comic sans;

border-top:1px solid #000;

border-bottom:1px solid #000;

height:90px;

padding-top:4px;

}

#so_credits img {

float:left;

margin:5px 10px 5px 0px;

border:1px solid #000000;

width:80px;

height:79px;

}

gradient.js

/*************************

Cross Browser Gradient Backgrounds

v1.0

Last Revision: 11.03.2005

[email protected]

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.className.split(" ");

if(document.all && !window.opera) {

objArray.style.width = objArray.offsetWidth + "px";

params[3] == "horizontal"?gType = 1:gType = 0;

objArray.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.offsetWidth/colorArray.length);

if(!w)w=1;

h = objArray.offsetHeight;

} else {

h = Math.round(objArray.offsetHeight/colorArray.length);

if(!h) h =1;

w = objArray.offsetWidth;

}

makeGrandParent(objArray);

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.offsetHeight || x >= objArray.offsetWidth) break;

}

objArray.appendChild(tmpDOM);

tmpDOM = null;

}

function getGradientObjects() {

a = document.getElementsByTagName("*");

objs = new Array();

for(i=0;i<a.length;i++) {

c = a.className;

if(c != "") if(c.indexOf("gradient") == 0) objs[objs.length] = a;

}

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

}

index.html

<head>

<title>Δοκιμαστικη Σελιδα</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">

<meta name="description" content="greece">

<META NAME="keywords" CONTENT="greece">

<META name="Robots" content="All">

<meta name="robots" content="index,follow">

<link rel="stylesheet" href="gradient.css" type="text/css">

<script type="text/javascript" src="gradient.js"></script>

</head>

<body height=100% width=100% class="gradient EAFDFF B8F9FF vertical" style="font-family: Comic Sans; font-size: 10pt" text="#000080" link="#000080" vlink="#000080">

<br><br><br><br>

<table width=100% style="font-size: 12pt" text="#000080" link="#000080" vlink="#000080">

<tr style="font-size: 14pt"><th align = left style= "font-size: 16pt">Ονομα1 & Ονομα2 Επιθετο1</th><td align=right><u>Τρόποι Επικοινωνίας</u></td></tr>

<tr style="font-size: 14pt"><th align = left>Επιχειρηματιες</th><td align=right><u>Γραφείο:</u> 210 123 45 67</td></tr>

<tr style="font-size: 14pt"><th align = left>Εμποριο - Διαφημιση</th><td align=right><u>Κινητό:</u> 691 234 56 78</td></tr>

<tr style="font-size: 14pt"><td align=right colspan=2><u>Em@il:</u>

<SCRIPT LANGUAGE="javascript">

<!-- // Javascript Email Address Encoder

var first = 'ma';

var second = 'il';

var third = 'to:';

var address = 'info';

var domain = '1234abcd';

var ext = 'gr';

document.write('<a href="');

document.write(first+second+third);

document.write(address);

document.write('@');

document.write(domain);

document.write('.');

document.write(ext);

document.write('">');

document.write('[email protected]</a>');

// -->

</script></td></tr>

<tr><td><br></td></tr>

<tr><td align=center colspan=2><br><img src="under_con.jpg"></td></tr>

<tr style="font-size: 15pt"><td align=center colspan=2><br>Υπό Κατασκευή</td></tr>

</table>

</body>

</html>

οποτε τι πρεπει να κανω

1ον: για τις γραμματοσειρες στον Opera?

2ον ( και σημαντικοτερο): για να εμφανιζεται το gradient background και στον FF?

ευχαριστω εκ των προτερων για τη βοηθεια.

Σύνδεση

Προβλημα εμφανισης gradient background σε FF

Προτεινόμενες αναρτήσεις

ironwiller

Αρχειοθετημένο

Σύνδεση