problema css solo su chrome

[davidelc]

firefox tt ok,

ie tt ok,

chrome no...

mi spiego,

sono dei semplici pulsanti in css che quando ci passa il mouse cambiano sfondo sembrando che vengano schiacciati

struttura del tipo:

.pulsante{
	background-image:url(url);
	background-repeat:no-repeat;
	}
	
.pulsante :hover{
	background-image:url(url);
	background-repeat:no-repeat;
	}

poi nella pagina li richiamo con una tabella:

<a href="#" target="_blank">
    <table class="pulsante" width="242" height="62" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333" bordercolor="#FFFFFF">
      <tr>
        <td></td>
      </tr>
    </table>
    </a>

solo su chrome sembra che non vadano, non ho provato opera safari ecc

 

[borgo italia]

ciao
una cosa: perchè nel css definisci la classa "pulsante" e nella tabella la chiami class="pulsantemyspace" ?

 

[davidelc]

eh scusa hai ragione

in realtà è tutto giusto, ma ho sbagliat a riportarvi il codice,

ho riportato il modello del css, in realtà avendo + pulsanti, nel css non ho la classe .pulsante, ma varie classi tipo:

.pulsantemyspace
.pulsantefacebook
.pulsanteyoutube
.pulsanteforum

ecc
ecc

e ho messo .pulsante per generalizzare

ora correggo e generalizzo anche nel html


cmq qualche idea su cosa può essere? penso sia capitato a molti... no?

 

[davidelc]

dopo ore e ore di prove e scleri vari...

HO RISOLTO !


ecco come ho lavorato:


- prima ho pensato che l'errore potesse essere dato dalle tabelle, avendo richiamato la classe nelle tabelle, magari chrome non lo supportava... allora ho eliminato il "class="nomepulsante"" dalle tabelle, e ho invece aperto dei tag "div" che contenessero le tabelle stesse.

in pratica il codice che prima era:

<a href="#" target="_blank">
    <table [B]class="pulsante"[/B] width="242" height="62" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333" bordercolor="#FFFFFF">
      <tr>
        <td></td>
      </tr>
    </table>
    </a>

l'avevo trasformato in:

[B]<div class="pulsante" align="center">[/B]
<a href="#" target="_blank">
    <table width="242" height="62" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333" bordercolor="#FFFFFF">
      <tr>
        <td></td>
      </tr>
    </table>
    </a>
    [B]<div>[/B]

in questo modo funzionava (anche se ho dovuto riadattare gli spazi fra i pulsanti che altrimenti essendo contenuti nel div e non + solo nella table mi venivano quasi sovrapposti).


solo che succedeva che la prima immagine rimaneva leggermente + a sx della seconda, per cui al passaggio del mouse si vedeva l'effetto ma risultava spostato anche di 2-4px a dx, creando un pessimo effetto dei due pulsanti sovrapposti...

quindi ho dovuto lavorare ancora nel css cercando di pensare a un modo per vincolare allo stesso modo le due immagini...

ho provato il position ma non ha funzionato, solo con l'absolute si vedeva l'effetto, il margin non mi dava risultati, allora mi è finalmente venuto in mente che si parlava di background, quindi backgruond-position mi è sembrata una buona idea...

infatti ho modificato il css da così (è sempre un esempio, non riporto il css originale ma lo schema):

.pulsante{
	background-image:url(url);
	background-repeat:no-repeat;
	}
	
.pulsante :hover{
	background-image:url(url);
	background-repeat:no-repeat;
	}

a così:

.pulsante{
	background-image:url(url);
	background-repeat:no-repeat;
        background-position:bottom;
	}
	
.pulsante :hover{
	background-image:url(url);
	background-repeat:no-repeat;
        background-position:bottom;
	}

e magicamente va tutto....