Visualizzazione dei risultati da 1 a 8 su 8
  1. #1

    Incredibile, ma problemi con Firefox!!!

    Problemi di visualizzazione solo con FF, mentre con O e IE (7 e precedenti) si vede tutto correttamente.
    Breve spiegazione del problema: le pagine di un sito - gestito da mio CMS - con inserite nell'header delle immagini a rotazione con effetto fade in FF non si vedono come dovrebbero.
    In IE e O si vede posizionato correttamente, mentre in FF si sposta a destra, apparentemente senza motivo, quindi il layout é sballato, ma ripeto solo con FF.

    Div che contiene le immagini nell'header :
    codice:
    <div id="frontphoto">
    <?php echo bannerimage_mod::nextRandomImage(); ?>
    </div>
    CSS del div:
    codice:
    #frontphoto{
    margin:0 0 10px 0;
    border:0;
    width:760px;
    }
    Quindi dovrebbe essere semplice: da admin del CMS inserisco le immagini e dovrei vederle giuste, ma non é così.

    Sono andato a guardare il sorgente DOM della pagina, e ho trvato questo:
    codice:
    <div id="frontphoto">
    <script type="text/javascript" src="modules/bannerimage_mod/js/ImageSlideshow2.js"></script><script type="text/javascript">var fadeimages=new Array();
    fadeimages[0]=['repository/bannerimage_mod/images/7_banner3.jpg','',''];
    fadeimages[1]=['repository/bannerimage_mod/images/5_banner1.jpg','',''];
    fadeimages[2]=['repository/bannerimage_mod/images/8_banner4.jpg','',''];
    fadeimages[3]=['repository/bannerimage_mod/images/6_banner2.jpg','',''];
    new fadeshow(fadeimages,760,100,0,3000, 0);
    </script>
    <div id="master0" style="overflow: hidden; position: relative; width: 760px; height: 100px;">
    <div id="canvas0_0" style="position: absolute; width: 760px; height: 100px; top: 0pt; left: 0pt; opacity: 0.990099; background-color: white; z-index: 1;">
    [img]repository/bannerimage_mod/images/8_banner4.jpg[/img]
    </div>
    <div id="canvas0_1" style="position: absolute; width: 760px; height: 100px; top: 0pt; left: 0pt; opacity: 0.990099; background-color: white; z-index: 1;">
    [img]repository/bannerimage_mod/images/5_banner1.jpg[/img]
    </div>
    </div>
    </div>
    Presumo che potrebbe esserci un problema con gli stili che vengono generati, ma non capisco cosa.
    In genere é IE che crea problemi con la visualizzazione di div con posizione relativa e assoluta, non FF!

    Mi sapete aiutare?

    Gio
    www.softcodex.ch

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Non e` facile vedere cosa non va.
    Intanto e` una pagina dinamica su due fronti: lato server e lato client. Se lato server puoi vedere cosa succede, non altrettanto e` facile sul lato client.
    La funzione JS non la includi, per cui non so se e cosa inserisce nel blocco in oggetto.
    Non si puo` neppure escludere un errore JS (magari nell'indirizzamento di un oggetto).

    L'unica cosa che vedo che non mi piace e` il border="0" nei tag <img>: se si usano i CSS non si devono usare formattazioni HTML, che possono creare conflitti (risolti in modo diverso dai vari browser).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    ecco il js completo (nel box sucessivo, ti metto solo le righe che credo diano problemi):
    codice:
    var fadebgcolor="white"
    
    ////NO need to edit beyond here/////////////
    
    var fadearray=new Array() //array to cache fadeshow instances
    var fadeclear=new Array() //array to cache corresponding clearinterval pointers
    
    var dom=(document.getElementById) //modern dom browsers
    var iebrowser=document.all
    
    function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
    	this.pausecheck=pause
    	this.mouseovercheck=0
    	this.delay=delay
    	this.degree=10 //initial opacity degree (10%)
    	this.curimageindex=0
    	this.nextimageindex=1
    	fadearray[fadearray.length]=this
    	this.slideshowid=fadearray.length-1
    	this.canvasbase="canvas"+this.slideshowid
    	this.curcanvas=this.canvasbase+"_0"
    	if (typeof displayorder!="undefined")
    	theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
    	this.theimages=theimages
    	this.imageborder=parseInt(borderwidth)
    	this.postimages=new Array() //preload images
    	for (p=0;p<theimages.length;p++){
    		this.postimages[p]=new Image()
    		this.postimages[p].src=theimages[p][0]
    	}
    
    	var fadewidth=fadewidth+this.imageborder*2
    	var fadeheight=fadeheight+this.imageborder*2
    
    	if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
    	document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
    	else
    	document.write('<div>[img]'+this.postimages[0].src+'[/img]</div>')
    
    	if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
    	this.startit()
    	else{
    		this.curimageindex++
    		setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
    	}
    }
    
    function fadepic(obj){
    	if (obj.degree<100){
    		obj.degree+=10
    		if (obj.tempobj.filters&&obj.tempobj.filters[0]){
    			if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
    			obj.tempobj.filters[0].opacity=obj.degree
    			else //else if IE5.5-
    			obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
    		}
    		else if (obj.tempobj.style.MozOpacity)
    		obj.tempobj.style.MozOpacity=obj.degree/101
    		else if (obj.tempobj.style.KhtmlOpacity)
    		obj.tempobj.style.KhtmlOpacity=obj.degree/100
    	}
    	else{
    		clearInterval(fadeclear[obj.slideshowid])
    		obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
    		obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
    		obj.populateslide(obj.tempobj, obj.nextimageindex)
    		obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
    		setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
    	}
    }
    
    fadeshow.prototype.populateslide=function(picobj, picindex){
    	var slideHTML=""
    	if (this.theimages[picindex][1]!="") //if associated link exists for image
    	slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
    	slideHTML+='[img]'+this.postimages[picindex].src+'[/img]'
    	if (this.theimages[picindex][1]!="") //if associated link exists for image
    	slideHTML+='</a>'
    	picobj.innerHTML=slideHTML
    }
    
    
    fadeshow.prototype.rotateimage=function(){
    	if (this.pausecheck==1) //if pause onMouseover enabled, cache object
    	var cacheobj=this
    	if (this.mouseovercheck==1)
    	setTimeout(function(){cacheobj.rotateimage()}, 100)
    	else if (iebrowser&&dom||dom){
    		this.resetit()
    		var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    		crossobj.style.zIndex++
    		fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
    		this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
    	}
    	else{
    		var ns4imgobj=document.images['defaultslide'+this.slideshowid]
    		ns4imgobj.src=this.postimages[this.curimageindex].src
    	}
    	this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
    }
    
    fadeshow.prototype.resetit=function(){
    	this.degree=10
    	var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    	if (crossobj.filters&&crossobj.filters[0]){
    		if (typeof crossobj.filters[0].opacity=="number") //if IE6+
    		crossobj.filters(0).opacity=this.degree
    		else //else if IE5.5-
    		crossobj.style.filter="alpha(opacity="+this.degree+")"
    	}
    	else if (crossobj.style.MozOpacity)
    	crossobj.style.MozOpacity=this.degree/101
    	else if (crossobj.style.KhtmlOpacity)
    	crossobj.style.KhtmlOpacity=obj.degree/100
    }
    
    
    fadeshow.prototype.startit=function(){
    	var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    	this.populateslide(crossobj, this.curimageindex)
    	if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
    		var cacheobj=this
    		var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
    		crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
    		crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
    	}
    	this.rotateimage()
    }
    il problema dovrebbe essere qui:
    codice:
    	var fadewidth=fadewidth+this.imageborder*2
    	var fadeheight=fadeheight+this.imageborder*2
    
    	if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
    	document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
    	else
    	document.write('<div>[img]'+this.postimages[0].src+'[/img]</div>')
    
    	if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
    	this.startit()
    	else{
    		this.curimageindex++
    		setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
    	}
    www.softcodex.ch

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    La cosa diventa molto complicata.
    Intanto si potrebbe semplificare il tutto, usando le classi invece di inserire lo stile dentro il tag. Soprattutto dato che e` il JS a scrivere dentro i blocchi.

    E comunque nel CSS inserito da JS ci sono le opacita`, che non sono riconsciute da tutti i browser; per di piu` ci sono i codici dell'opacita` per IE, Mozilla (peraltro con sintassi sbagliata), un altro browser, ma non FF e Safari (che usano la sintassi:
    opacity: 0.10;
    )

    Poi potrebbe anche trattarsi di un errore di calcolo dei bordi. Infatti
    La larghezza totale di un blocco (browser standard) e` data da:
    margin + border + padding + width + padding + border + margin
    In IE (quirks mode) invece e` data da:
    margin + width + margin (border e padding fanno parte di width)

    Se veramente e` questo il problema, occorre sniffare il browser e inserire un if opportuno che modifichi il calcolo a seconda del browser.
    Puoi renderti conto se effettivamente e` questo il problema, assegnando la DTD XHTML Strict al documento: in tal caso anche IE si dovrebbe comportare come i browser standard (il box model di IE con XHTML Strict e` molto simile a quello del W3C).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    effettivamente le cose non sono delle più semplici, ma ricordo che il problema é che non si vede correttamente in FF.

    ti linko 3 immagini :

    www.softcodex.ch/firefox.png
    www.softcodex.ch/opera.png
    www.softcodex.ch/IE7.png
    www.softcodex.ch

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Effettivamente con quelle differenze non puo` essere il calcolo differente dei margini e bordi (o per lo meno non sembra probabile).

    D'altronde il codice e` molto complicato, e non e` facie venirne a capo.
    Mi domandavo se il codice JS lo hai fatto tu o e` una "invenzione" del CMS. Nel primocaso dovrebbe essere semplice (relativamente) modificarlo, nel secondo diventa impresa ardua.

    Se dovessi affrontare il problema io, procederei con una razionalizzazione del JS, escludendo dal codice dapprima il CSS e sostituendolo con le classi. In tal modo si puo` separare l'intervento sul CSS da quello sul JS.
    In secondo luogo eliminerei i document.write(), che nel DOM del W3C non sono molto ben visti (mentre sono validi per il DOM di IE). Al loro posto puoi usare la proprieta` innerHTML (da usare dopo che la pagina e` caricata) oppure (meglio, ma piu` complesso) le strutture moderne (che ora mi sfuggono, ma vengono usate nel forum di JS).

    Una prova che puoi fare in maniera semplice e` controllare il file HTML come appare nei due browser: dovrebbe essere diverso, perche` il document.write viene reso nel codice in modo diverso, pur in presenza di un uguale sorgente.
    E controlla se ci sono cose "strane" in ambedue i codici (sempre che il server non fornisca codice diverso a seconda del browser, che e` anche possibile - in tal caso fai meglio a cambiare CMS, pena un mal di testa colossale).

    Come vedi sono consigli dati al buio, senza che ci conti molto; ma che ti possono dare un minimo di aiuto nel buio in cui sei
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  7. #7
    il js per le immagini non l'ho scritto io, ho preso e modificato uno già esistente. mi sa che dovrò trovarne uno che non crei conflitti con il CMS.....

    ...CMS che non posso cambiare dato che si tratta del mio. nel senso che l'ho sviluppato io...e quindi lo uso.

    cmq, ora vedo ti trovare una valida alternativa per risolvere il problema...e se ho bisogno, mi ritrovi qui....

    thx
    www.softcodex.ch

  8. #8
    sono riuscito a risolvere il problema. sinceramente concettualmente non ho cmq capito benissimo...

    il lampo di genio, me lo ha dato un estensione di FF: FireBug 1.0.

    ho corretto una width nell'header della pagina

    prima era:
    codice:
    #header h1{
    width:250px;
    margin:0 0 10px 0;
    float:left;
    }
    ora é:
    codice:
    #header h1{
    width:0px;
    margin:0 0 10px 0;
    float:left;
    }
    l'immagine che si spostava era proprio di 250px, e ripeto che non capisco come mai era h1 con la width settata a 250px (larghezza del logo inserito) che creava problemi.

    sta di fatto che ora funziona bene (FF- IE - O)

    grazie

    Gio
    www.softcodex.ch

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.