[HTML] - <a href="XX">con due span inclusi...</a> non va su IE [mod]

17-02-2006, 16.22.35

Codice PHP:


<DIV class='sub_post_row_dx_solo_num_commenti'><A class="grassetto" title="Leggi i commenti" href="http://attorianzo.altervista.org/index.php?cat=11&amp;post=207"><span class='a_sinistra'>207</span><span class='a_destra'>Commenti(3)</span></a></DIV>

Questa riga sul browser internet explorer: --> l'effetto hover del link non va!!

sul resto dei browser dell'universo conosciuto --> Va!!!!

Classi di stile usate sono:

Codice PHP:




.sub_post_row_dx_solo_num_commenti {
    margin-top:2.5em;
    margin-bottom:0.5em;
    float:right;
    color: #606060;
    font-family: Trebuchet Ms, Verdana, Arial, Helvetica, sans-serif;
    font-size:1.0em;
    text-align:right;
    width:100%;
}


.a_sinistra { float:left }
.a_destra { float:right }




A.grassetto {color:#686B97; font-weight:bold; text-decoration:none; font-size:80%; font-family:Verdana, Arial, Helvetica, sans-serif;} 
A.grassetto:hover {color:#CCCCCC}

La pagina dove si verifica il problema è questa

**silverseraph** · 17-02-2006, 16.46.59

Prova con
<DIV class="sub_post_row_dx_solo_num_commenti"><A class="grassetto" title="Leggi i commenti" href="http://attorianzo.altervista.org/index.php?cat=11&post=207"><span class='a_sinistra'>207</span><span class='a_destra'>Commenti(3)</span></a></DIV>

**dementialsite** · 17-02-2006, 16.48.24

Spero di non sparare una vaccata, ma prova ad aggiungere questi stili (occhio agli spazi!):

Codice:

A.grassetto .a_sinistra, A.grassetto .a_destra { color:#CCCCCC }

Stammi bene...

[4 silverseraph] scusami, ma non mi sembra né più né meno di quanto scritto da attorianzo...

**silverseraph** · 17-02-2006, 16.54.23

Ho aggiunto i doppi apici al div, forse è dovuto da quello.

17-02-2006, 16.55.45

x silverseraph : Niente da fare... anche con i doppi apici...

x dementialsite: no non va... facendo in quel modo il contenuto dei due span resta sempre bianco, sia che il mouse sia sopra sia no...

Ho anche provato a fare così... niente da fare..

Codice PHP:


A.grassetto:hover, .a_sinistra:hover, A.grassetto:hover, .a_destra:hover { color:#CCCCCC }

Inoltre ho provato anche a togliere il DIV e a lasciare uno span soltanto cioè lo script è diventa così, e il problema si verifica cmq:
<a href="XX"><SPAN class='a_sinistra'>CICCIO</SPAN></a>

**dementialsite** · 17-02-2006, 17.02.14

Originalmente inviato da attorianzo

...
x dementialsite: no non va... facendo in quel modo il contenuto dei due span resta sempre bianco, sia che il mouse sia sopra sia no...
...

Infatti avevo dimenticato qualcosa:

Codice:

A.grassetto:hover .a_sinistra, A.grassetto:hover .a_destra { color:#CCCCCC }

Stammi bene...

17-02-2006, 17.04.45

Infatti avevo dimenticato qualcosa: Codice:

A.grassetto:hover .a_sinistra, A.grassetto:hover .a_destra { color:#CCCCCC }

Niente da fare...anche così resta tutto bianco.. (su IE...è sottointeso...)

**silverseraph** · 17-02-2006, 17.04.50

Allora invece di indicare i float con lo span, potresti spaziare le due scritte con i padding, esempio:

.a_sinistra { padding-right:xpx }
.a_destra { padding-left:xpx }

17-02-2006, 17.08.20

Originalmente inviato da silverseraph

Allora invece di indicare i float con lo span, potresti spaziare le due scritte con i padding, esempio:

.a_sinistra { padding-right:xpx }
.a_destra { padding-left:xpx }

Provato.. anche così niente da fare...anzi, gia che c'ero ho provato a togliere del tutto sia float che padding, niente da fare... l'hover non va...

**silverseraph** · 17-02-2006, 17.12.32

allora prova a indicare A:link, A:visited, etc...

17-02-2006, 17.18.45

Originalmente inviato da silverseraph

allora prova a indicare A:link, A:visited, etc...

Ho aggiunto questi:

Codice PHP:


A:link {color:#686B97; font-weight:bold; text-decoration:none; font-size:80%; font-family:Verdana, Arial, Helvetica, sans-serif;} 
A:visited {color:#686B97;}
A:hover {color:#FF0000;}

nulla da fare, resta nero e niente effetto hover...

**silverseraph** · 17-02-2006, 17.27.17

Prova così

Codice HTML:

a.grassetto:link { 
color:#686B97; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica, sans-serif; font-size: 
80%; TEXT-DECORATION: none
} 
a.grassetto:active {
color:#686B97; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica, sans-serif; font-size: 
80%; TEXT-DECORATION: none
} 
a.grassetto:visited {
color:#686B97; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica, sans-serif; font-size: 
80%; TEXT-DECORATION: none
} 
a.grassetto:hover{
color:#FF0000; FONT-WEIGHT: bold; FONT-FAMILY: Verdana, Helvetica, sans-serif; font-size: 
80%; TEXT-DECORATION: none
}

17-02-2006, 17.34.12

Anzitutto grazie per la tua disponibilità Silvergraph... L'hai provato da te in locale quello che hai scritto?... perchè a me (come al solito..) funziona ovunque tranne che su IE anche con quello che tu hai scritto...

**silverseraph** · 17-02-2006, 17.36.49

A me funziona dappertutto, anche su ie...

17-02-2006, 17.39.49

uh? ti funziona?... anche se il link si trova dentro uno span incluso in tag <a>? Perchè se tolgo gli span inclusi funziona anche a me!

**silverseraph** · 17-02-2006, 17.44.42

ah è vero..anche a me con gli span inclusi nn va :D

cmq, ti conviene utilizzare due collegamenti ipertestuali a questo punto.

17-02-2006, 18.00.26

Originalmente inviato da silverseraph

ah è vero..anche a me con gli span inclusi nn va :D

cmq, ti conviene utilizzare due collegamenti ipertestuali a questo punto.

Eh si...però purtroppo mi serviva di usare proprio quella forma, mi serviva per differenziare i link ed ottenere così la validazione di accessibilita...

Il w3c vuole che tutti i link si chiamino in modo diverso e che non ci siano link che si chiamino nello stesso modo nell'ambito della stessa pagina...
La parolina "commenti(0)" infatti è ripetuta per ogni post che c'è nella pagina e scatta così l'errore di validazione... In quel modo invece si sarebbe chiamato:

"240 commenti(0)" (oppure 235 commenti(0) ecc. ec... si tratta del num.del post!)

In questo modo ogni link è diverso...

Gli span mi servivano per separare in maniera "gradevole" il numero dalla parolina "commenti(0);

Ho invece risolto il problema... ma in una maniera diciamo...poco elegante.. ma... "funzionale"... (e soprattutto "crossbrowser") cioè ho fatto così:

Codice PHP:


<DIV class='sub_post_row_sx'>Postato da: <i>Attorianzo</i> in <a class="grassetto" title="Vai alla categoria" href='http://attorianzo.altervista.org/index.php?cat=11'>Etna</a> alle <i>0:25</i></DIV><DIV class="sub_post_row_dx_solo_num_commenti"><A class="grassetto" title="Leggi i commenti" href="http://attorianzo.altervista.org/index.php?cat=11&amp;post=207">207                                         Commenti(3)</a></DIV></DIV></DIV><DIV class='box_ultimo_post_a_destra'><DIV class='div_dentro_box_ultimo_post'><DIV class='date_post'>31 Dicembre 2005</DIV>

Il risultato lo potete vedere nel solito link

IE SUCKS!!!

**twisterdark** · 17-02-2006, 18.09.05

Attorianzo, più volte ti ho ripreso perchè i tuoi titoli non seguono le direttive, sei recidivo: il prossimo te lo chiudo.

**silverseraph** · 17-02-2006, 19.26.40

Puoi anche separarli con   cmq nella mia home la maggiorparte dei link si chiamano allo stesso modo e nella validazione non me los egna come errore.

17-02-2006, 19.32.06

? Valutazione semplice W3C o quella del bobby per l'accessibilità?..

**silverseraph** · 17-02-2006, 19.51.46

w3c normale...come avevi detto sopra

19-02-2006, 03.04.16

Come non detto... Il white-space:pre piace come, al solito, a tutti i browser ma non piace a IE.. la spaziatura in IE non avviene....

Avete qualche idea?

**heracleum** · 19-02-2006, 04.06.40

Ho trovato un "workaround" a questa ennesima pecca di IE, ho provato in locale e pare vada tutto bene, fammi sapere se gira bene anche nel contesto della tua pagina.

Mi sono basato sul codice del primissimo post.
Dovresti modificare così:
aggiungi negli style:
.cursor_link { cursor:hand; }

modifica la riga del link in:
<div class="sub_post_row_dx_solo_num_commenti"><a class="grassetto" title="Leggi i commenti" href="http://attorianzo.altervista.org/index.php?cat=11&post=207"><span class="a_sinistra cursor_link">207</span>Commenti(3)</a></div>

Ovvero,
ho tolto lo span a Commenti(3) visto che il div contenitore allinea già il testo a destra, quindi non c'è bisogno di "floattare" a destra. Stranamente in questo caso IE attiva lo hover, ma ancora lascia il cursore "testo" invece della manina, quindi ho aggiunto il class .cursor_link
Al massimo bisognerà aggiunstare qualche disallineamento verticale, roba di un paio di pixel, perché unascritta sta in float e l'altra no. Vedi un po' come si comporta nel tuo contesto.

19-02-2006, 12.26.17

Sei grande l'ho appena provato in locale e funziona

**heracleum** · 19-02-2006, 17.11.24

Good,
senti visto che quest'altro thread dove stavamo risolvendo l'onclick ce l'hanno chiuso (senza neanche due cortesi paroline per sapere da chi) e visto che -se me lo si permette- avevo ancora qualcosa da aggiungere, lo scrivo qui (così chiudono anche questo qui per OT

):

Originalmente inviato da attorianzo

Si infatti ho notato l'errore (Ho notato che il modo migliore per vedere errori javascript è usare IE!)..

AH! bestemmia!

Al massimo con IE se si è distratti si può più facilmente notare la presenza di un errore javascript (perché sono mostrati con molta meno discrezione), ma accorgertene sì.. ma capire QUAL E' e DOVE E' l'errore col cavolo che ci riesci!

Mentre il metodo migliore e più preciso per sviluppare in javascript è tenere aperta la Console Javascript di Mozilla (e firefox). La tieni lì, ripulisci la lista, carichi la pagina e se vedi nuove righe aggiunte nella lista vuo dire che hai un errore, e ti segnala il punto esatto di dove è accaduto l'errore, in quale script (sia in pagina sia in file js separato), grandioso.
C'è invece da deprimersi quando l'errore js accade SOLO su IE... allora è un dramma capire perché.

Discussione: [HTML] - <a href="XX">con due span inclusi...</a> non va su IE [mod]

LinkBack

Strumenti discussione

Display

[HTML] - <a href="XX">con due span inclusi...</a> non va su IE [mod]

Regole di scrittura