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

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
ironwiller
Δημοσιεύσεις: 109
Εγγραφή: 20 Απρ 2005 15:19

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

Δημοσίευση από ironwiller » 29 Ιούλ 2007 21:03

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

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

παρακατω παραθετω τα 3 αρχεια: το 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]steve@slayeroffice.com[/email]

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 [url]http://slayeroffice.com/code/gradient/[/url] 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&#40;i=0;i<objArray.length;i++&#41; &#123;
		params = objArray&#91;i&#93;.className.split&#40;" "&#41;;
		if&#40;document.all && !window.opera&#41; &#123;
			objArray&#91;i&#93;.style.width = objArray&#91;i&#93;.offsetWidth + "px";
			params&#91;3&#93; == "horizontal"?gType = 1&#58;gType = 0;
			objArray&#91;i&#93;.style.filter = "progid&#58;DXImageTransform.Microsoft.Gradient&#40;GradientType="+gType+",StartColorStr=\"#" + params&#91;1&#93; + "\",EndColorStr=\"#" + params&#91;2&#93; + "\"&#41;";
	&#125; else &#123;
			colorArray = createColorPath&#40;params&#91;1&#93;,params&#91;2&#93;&#41;;
			x=0;y=0;
			if&#40;params&#91;3&#93; == "horizontal"&#41; &#123;
				w=Math.round&#40;objArray&#91;i&#93;.offsetWidth/colorArray.length&#41;;
				if&#40;!w&#41;w=1;
				h = objArray&#91;i&#93;.offsetHeight;
			&#125; else &#123;
				h = Math.round&#40;objArray&#91;i&#93;.offsetHeight/colorArray.length&#41;;
				if&#40;!h&#41; h =1;
				w = objArray&#91;i&#93;.offsetWidth;
			&#125;
			makeGrandParent&#40;objArray&#91;i&#93;&#41;;
			tmpDOM = document.createDocumentFragment&#40;&#41;;
			for&#40;p=0;p<colorArray.length;p++&#41; &#123;
				g = document.createElement&#40;"div"&#41;;
				g.setAttribute&#40;"style","position&#58;absolute;z-index&#58;0;top&#58;" + y + "px;left&#58;" + x + "px;height&#58;" + h + "px;width&#58;" + w + "px;background-color&#58;rgb&#40;" + colorArray&#91;p&#93;&#91;0&#93; + "," + colorArray&#91;p&#93;&#91;1&#93; + "," + colorArray&#91;p&#93;&#91;2&#93; + "&#41;;"&#41;;
				params&#91;3&#93; == "horizontal"?x+=w&#58;y+=h;
				tmpDOM.appendChild&#40;g&#41;;
				if&#40;y>=objArray&#91;i&#93;.offsetHeight || x >= objArray&#91;i&#93;.offsetWidth&#41; break;
			&#125;
			objArray&#91;i&#93;.appendChild&#40;tmpDOM&#41;;
			tmpDOM = null;
		&#125;
	&#125;
&#125;

function getGradientObjects&#40;&#41; &#123;
	a = document.getElementsByTagName&#40;"*"&#41;;
	objs = new Array&#40;&#41;;
	for&#40;i=0;i<a.length;i++&#41; &#123;
		c = a&#91;i&#93;.className;
		if&#40;c != ""&#41; if&#40;c.indexOf&#40;"gradient"&#41; == 0&#41; objs&#91;objs.length&#93; = a&#91;i&#93;;
	&#125; 
	return objs;
&#125;
	
function createColorPath&#40;color1,color2&#41; &#123;
	colorPath = new Array&#40;&#41;;
	colorPercent = 1.0;
	do &#123;
		colorPath&#91;colorPath.length&#93;=setColorHue&#40;longHexToDec&#40;color1&#41;,colorPercent,longHexToDec&#40;color2&#41;&#41;;
		colorPercent-=.01;
	&#125; while&#40;colorPercent>0&#41;;
	return colorPath;
&#125;
		
function setColorHue&#40;originColor,opacityPercent,maskRGB&#41; &#123;
	returnColor=new Array&#40;&#41;;
	for&#40;w=0;w<originColor.length;w++&#41; returnColor&#91;w&#93; = Math.round&#40;originColor&#91;w&#93;*opacityPercent&#41; + Math.round&#40;maskRGB&#91;w&#93;*&#40;1.0-opacityPercent&#41;&#41;;
	return returnColor;
&#125;

function longHexToDec&#40;longHex&#41; &#123;
	return new Array&#40;toDec&#40;longHex.substring&#40;0,2&#41;&#41;,toDec&#40;longHex.substring&#40;2,4&#41;&#41;,toDec&#40;longHex.substring&#40;4,6&#41;&#41;&#41;;	
&#125;

function toDec&#40;hex&#41; &#123;	
	return parseInt&#40;hex,16&#41;;
&#125;
	
function makeGrandParent&#40;obj&#41; &#123;
	disp = document.defaultView.getComputedStyle&#40;obj,''&#41;.display;
	disp == "block"?nSpan = document.createElement&#40;"div"&#41;&#58;	nSpan = document.createElement&#40;"span"&#41;;
	mHTML = obj.innerHTML;
	obj.innerHTML = "";
	nSpan.innerHTML = mHTML;
	nSpan.setAttribute&#40;"style","position&#58;relative;z-index&#58;10;"&#41;;
	obj.appendChild&#40;nSpan&#41;;
&#125;
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&#58; Comic Sans; font-size&#58; 10pt" text="#000080" link="#000080" vlink="#000080">
<br><br><br><br>
<table width=100%  style="font-size&#58; 12pt" text="#000080" link="#000080" vlink="#000080">
<tr style="font-size&#58; 14pt"><th align = left style= "font-size&#58; 16pt">Ονομα1 & Ονομα2 Επιθετο1</th><td align=right><u>Τρόποι Επικοινωνίας</u></td></tr>
<tr style="font-size&#58; 14pt"><th align = left>Επιχειρηματιες</th><td align=right><u>Γραφείο&#58;</u> 210 123 45 67</td></tr>
<tr style="font-size&#58; 14pt"><th align = left>Εμποριο - Διαφημιση</th><td align=right><u>Κινητό&#58;</u> 691 234 56 78</td></tr>
<tr style="font-size&#58; 14pt"><td align=right colspan=2><u>Em@il&#58;</u> 
<SCRIPT LANGUAGE="javascript">
<!-- // Javascript Email Address Encoder

	var first = 'ma';
	var second = 'il';
	var third = 'to&#58;';
	var address = 'info';
	var domain = '1234abcd';
	var ext = 'gr'; 
	document.write&#40;'<a href="'&#41;;
	document.write&#40;first+second+third&#41;;
	document.write&#40;address&#41;;
	document.write&#40;'@'&#41;;
	document.write&#40;domain&#41;;
	document.write&#40;'.'&#41;;
	document.write&#40;ext&#41;;  
	document.write&#40;'">'&#41;; 
	document.write&#40;'info@1234abcd.gr</a>'&#41;;
// -->
</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&#58; 15pt"><td align=center colspan=2><br>Υπό Κατασκευή</td></tr>
</table>
</body>
</html>
οποτε τι πρεπει να κανω
1ον: για τις γραμματοσειρες στον Opera?
2ον ( και σημαντικοτερο): για να εμφανιζεται το gradient background και στον FF?

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

ΥΣ: ζητω συγνωμη για το μεγαλο θεμα, αλλα δυστυχως το bbcode "spoiler" δε λειτουργει εδω.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

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

Δημοσίευση από skeftomilos » 30 Ιούλ 2007 01:24

OMG. Αυτή η προσέγγιση καταναλώνει εκατονταπλάσια resources σε μνήμη, CPU και bandwidth από ένα απλό gifάκι. :doh:
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
ironwiller
Δημοσιεύσεις: 109
Εγγραφή: 20 Απρ 2005 15:19

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

Δημοσίευση από ironwiller » 30 Ιούλ 2007 01:33

skeftomilos έγραψε:OMG. Αυτή η προσέγγιση καταναλώνει εκατονταπλάσια resources σε μνήμη, CPU και bandwidth από ένα απλό gifάκι. :doh:
ευχαριστω για την συμμετοχη σου, αλλα θα παρακαλουσα να μιλαμε για ΛΥΣΗ στο ΣΥΓΚΕΚΡΙΜΕΝΟ και οχι να κριτικαρουμε το τι θελει καποιος να κανει.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

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

Δημοσίευση από skeftomilos » 30 Ιούλ 2007 11:05

OK, σόρρυ. Σίγουρα θα υπάρχουν σοβαροί λόγοι που θέλεις να αποφύγεις το bg image, μόνο που δε μπορώ να φανταστώ ποιοι μπορεί να είναι αυτοί.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
ironwiller
Δημοσιεύσεις: 109
Εγγραφή: 20 Απρ 2005 15:19

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

Δημοσίευση από ironwiller » 30 Ιούλ 2007 12:16

skeftomilos έγραψε:OK, σόρρυ. Σίγουρα θα υπάρχουν σοβαροί λόγοι που θέλεις να αποφύγεις το bg image, μόνο που δε μπορώ να φανταστώ ποιοι μπορεί να είναι αυτοί.
απλα δε θελω. δεν υπαρχει κατι αλλο. εσυ γνωριζεις πως θα μπορουσα να κανω το αποτελεσμα που θελω να κανω? αν ναι σε παρακαλω γραψε. ευχαριστω.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

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

Δημοσίευση από skeftomilos » 30 Ιούλ 2007 12:59

Δεν το γνωρίζω, αλλά θα μπορούσα να το ψάξω και να το βρω. :-) Αν χρειαστείς επαγγελματική βοήθεια PM me.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

jimvrasna
Δημοσιεύσεις: 48
Εγγραφή: 21 Απρ 2006 23:57
Τοποθεσία: ΜΑΚΡΙΑ ΜΑΚΡΙΑ
Επικοινωνία:

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

Δημοσίευση από jimvrasna » 02 Οκτ 2007 12:29

ο FF δεν υποστιριζει gradient background ακομα δυστυχώς !!!
κανουμε το σταυρο μας και περιμενουμε αν η καινουργια εκδοση το υποστιριζει
SIMONE
a star is.... created!!!!!!

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης