[CSS] come renderli crossbrowser ?

**Taitaonline** · 22-03-2006, 22.04.24

Allora, il problema è il seguente e riguarda questa pagina EDIT: la pagina è stata rimossa in quanto non serve più, il nuovo link lo trovate pochi post più in giù. .
Sto creando due "soluzioni grafiche" per poi inserirle nella pagina originale del mio sitarello; io son riuscito ad arrivare fino a lì ma ora ho bisogno di aiuto.
Ovviamente con IE funziona ma non con Firefox...

Ora chiedo: la prima tabella con il link testuale (tralasciate il fatto che è ancora "spartana": verrà abbellita più tardi) funziona bene sia con IE che con Firefox, ma non è creata con i CSS, quindi, come trasferire il codice che gestisce il rollover in CSS ?
Il codice è questo:

Codice:

<table width="600">
 <tr>
  <td width="150"> <b>CICCI NINJA </b> </td>
  <td width="450" class="cicci" onMouseOver="this.style.background='#abcdef'" onMouseOut="this.style.background='#000000'"> <a href="/taita/parole/ciccininja/ciccininja.htm"> Una rivisitazione sulle ronde di Polizia... bla bla bla bla bla ... </a> </td>
 </tr>
</table>

La seconda tabella invece con Firefox non si vede proprio ; lo "style" è così impostato :

Codice:

 <style type="text/css">
A:link { color:#000000 }
A:visited { color:#000000 }
A:hover { color:#000000 }
A:active { color:000000 }

a.linkcicci
{ background-image: url(http://taitaonline.altervista.org/taita/parole/cicci1.gif);
  width: 190px;
  height: 210px; }
a.linkcicci:hover
{ background-image: url(http://taitaonline.altervista.org/taita/parole/cicci2.gif);
  width: 190px;
  height: 210px; }
td.cicci  { background:#000000 }

</style>

mentre nel "Body" ho inserito questa tabella così compilata:

Codice:

<table>
 <tr>
  <td> <a href="/taita/parole/ciccininja/ciccininja.htm" class="linkcicci"> </a> </td>
 </tr>
</table>

....Qualcuno può darmi una mano e dirmi dove ho sbagliato ?
Grassie !

**silverseraph** · 22-03-2006, 22.25.47

Beh, diciamo, che hai le idee un po confuse. il rollover in css è un'altra cosa, e riguarda i collegamenti ipertestuali. Tu cosa vorresti fare? Rendere tabless quella tabella? Cioè, gestirla con i DIV?

Per quanto riguarda la seconda tabella prova ad inserire tutti gli attributi: a:link, a:active, a:visited, a:hover l'ultimo già c'è)
E poi nel collegamento ipertestuale prova ad inserire un   prima della chiusura del tag.

**Taitaonline** · 22-03-2006, 22.47.15

Si, in effetti ho le idee confuse

...
Tralasciando allora il concetto di "rollover" (che forse ha creato problemi), praticamente io vorrei trasportare il codice della prima tabella in CSS (sempre che si possa fare), cioè, invece di avere tutto quel "TD" pieno di scritte, preferirei averlo con una classe ed usare un CSS per gestirlo, giusto per non avere un codice lunghissimo visto che poi i link saranno parecchi.

Per quanto riguarda la seconda tabella, se l'hai vista con IE sapra che sono due immagini che si sovrappongono (e che funziona)... bene, il CSS così come è scritto, Firefox non lo legge e quindi vorrei trovare un sistema alternativo per farglielo leggere.
P.S.) La soluzione che mi hai dato lo appena testata e non funzona.

Grassie.

**Leo91** · 22-03-2006, 22.52.44

Originalmente inviato da Taitaonline

Si, in effetti ho le idee confuse

...
Tralasciando allora il concetto di "rollover" (che forse ha creato problemi), praticamente io vorrei trasportare il codice della prima tabella in CSS (sempre che si possa fare), cioè, invece di avere tutto quel "TD" pieno di scritte, preferirei averlo con una classe ed usare un CSS per gestirlo, giusto per non avere un codice lunghissimo visto che poi i link saranno parecchi.

Per quanto riguarda la seconda tabella, se l'hai vista con IE sapra che sono due immagini che si sovrappongono (e che funziona)... bene, il CSS così come è scritto, Firefox non lo legge e quindi vorrei trovare un sistema alternativo per farglielo leggere.
P.S.) La soluzione che mi hai dato lo appena testata e non funzona.

Grassie.

PENSANDO DI AVER CAPITO
metti tra gli <head>:
<link rel="stylesheet" href="fogliocss.css"> e allora i css contenuti nel file fogliocss.css saranno utilizzabili nella pagina nella quale metti quel tag...

Bene?

**Taitaonline** · 22-03-2006, 23.02.34

Originalmente inviato da Leo91

PENSANDO DI AVER CAPITO
metti tra gli <head>:
<link rel="stylesheet" href="fogliocss.css"> e allora i css contenuti nel file fogliocss.css saranno utilizzabili nella pagina nella quale metti quel tag...

Bene?

beh.... lo farò in seguito: quello è il richiamo per il foglio di stile esterno, che però devo ancora creare

per ora sto ancora lavorando con i CSS interni, cioè, per ora i CSS sono scritti direttamente nella pagina html e quindi dovrebbero essere letti senza problemi.

**silverseraph** · 23-03-2006, 15.21.50

QUESTO:

Codice HTML:

<table width="600">
 <tr>
  <td width="150"> <b>CICCI NINJA </b> </td>
  <td width="450" class="cicci" onMouseOver="this.style.background='#abcdef'" onMouseOut="this.style.background='#000000'"> <a href="/taita/parole/ciccininja/ciccininja.htm"> Una rivisitazione sulle ronde di Polizia... bla bla bla bla bla ... </a> </td>
 </tr>
</table>

Sostituiscilo con:

Codice HTML:

<div style="display:inline">CICCI NINJA </div>
<div style="display:inline"  class="cicci"> <a href="/taita/parole/ciccininja/ciccininja.htm"> Una rivisitazione sulle ronde di Polizia... bla bla bla bla bla ... </a> </div>

E, successivamente, l'attributo CSS .cicci modificalo con:

Codice HTML:

.cicci A:link, 
.cicci A:visited, 
.cicci A:active { 
      width: 450px;
      line-height: 20px;
      color: #ffffff;
      BACKGROUND-COLOR: #000000;
      font-size: 11px;
      font-family:Verdana;
      text-decoration: none;
      display:block;
} 

.cicci A:hover {
      background-color: #abcdef;
}

**Taitaonline** · 23-03-2006, 20.19.03

Grassie ... farò tesoro di tutto ciò.
Ad ogni modo mi sono attivato in maniera da "mischiare" il tuo consiglio (quello di usare le immagini) con quello dei link testuali in tabella ...
Per ora ne è uscita questa cosa , che funziona sia con IE che con Firefox (non so con Opera ma spero di si) ... ovviamente è ancora molto spartana ma se te, o qualcun altro che passa di qua per caso, mi può assicurare del suo funzionamento, vedrò di completare il tutto.

**silverseraph** · 23-03-2006, 20.20.48

funziona perfettamente, bravo, mi piace

**Taitaonline** · 23-03-2006, 20.26.08

Bene... allora adesso comincerò a "picchiarmi" per vedere un pò come sistemare il tutto in maniera più "seria".

Discussione: [CSS] come renderli crossbrowser ?

LinkBack

Strumenti discussione

Display

[CSS] come renderli crossbrowser ?

Regole di scrittura