Problema visualizzazione link definiti in CSS con Google Chrome

30-01-2013, 17.03.43

Ciao a tutti, ultimamente sto abusando del forum :)

So che Chrome ha la fama di miglior interprete dei CSS, quindi sicuramente sbaglio qualcosa io.

Allora, io definisco i link in un div in questo modo:

Codice:

#left a:link {color: #AAAAAA; font-size: 12px; font-family: arial, calibri; text-decoration: none;}
#left a:hover {color: #E56717; font-size: 12px; text-decoration: underline;}
#left a:visited {color: #AAAAAA; font-size: 12px; font-family: arial, calibri; text-decoration: none;}

E in un altro div in questo modo:

Codice:

#menu a:link {color: blue; font-size: 14px; text-decoration: none; font-family: arial, calibri;}
#menu a:link {color: #0060A0; font-size: 14px; text-decoration: underline; font-family: arial, calibri;}
#menu a:visited {color: blue; font-size: 14px; text-decoration: none; font-family: arial, calibri;}

Nel primo div funziona tutto, ad eccezione del link:hover, che funziona ogni tanto, ma non sempre.

Nel secondo addirittura non mi legge il colore e me li sottolinea.

Con gli altri browser funziona tutto (anche IE, c'e' qualcosa non va

)

Grazie a tutti, ciao!

**karl94** · 30-01-2013, 17.41.46

Originalmente inviato da threads

Ciao a tutti, ultimamente sto abusando del forum :)

Non ne stai abusando, serve esattamente per questo.

Originalmente inviato da threads

So che Chrome ha la fama di miglior interprete dei CSS, quindi sicuramente sbaglio qualcosa io.

Ah, sì? Da quando?
Personalmente non credo ci sia un miglior interprete (anche perché l'interprete, o parser, è un singolo componente che permette ad un browser di supportare un linguaggio come il CSS), oramai tutti i browser moderni implementano più o meno le medesime proprietà CSS in modo conforme agli standard. C'è poi chi supporta l'una o l'altra bozza di un nuovissimo modulo CSS3, ma ovviamente sono implementazioni in via di sviluppo che prima o poi anche gli altri browser forniranno.

Originalmente inviato da threads

Allora, io definisco i link in un div in questo modo:

Codice:

#left a:link {color: #AAAAAA; font-size: 12px; font-family: arial, calibri; text-decoration: none;}
#left a:hover {color: #E56717; font-size: 12px; text-decoration: underline;}
#left a:visited {color: #AAAAAA; font-size: 12px; font-family: arial, calibri; text-decoration: none;}

E in un altro div in questo modo:

Codice:

#menu a:link {color: blue; font-size: 14px; text-decoration: none; font-family: arial, calibri;}
#menu a:link {color: #0060A0; font-size: 14px; text-decoration: underline; font-family: arial, calibri;}
#menu a:visited {color: blue; font-size: 14px; text-decoration: none; font-family: arial, calibri;}

Nel primo div funziona tutto, ad eccezione del link:hover, che funziona ogni tanto, ma non sempre.

Forse c'è qualche altra regola nel foglio di stile che sovrascrive questa in alcuni casi? Se indichi l'indirizzo si può verificare.

Originalmente inviato da threads

Nel secondo addirittura non mi legge il colore e me li sottolinea.

Nota che nella seconda porzione di codice hai tre regole CSS, di cui le prime due hanno il medesimo selettore, dunque la seconda sovrascrive il colore e la decorazione del testo che hai specificato nella prima (il font no perché non l'hai specificato nella seconda).

Originalmente inviato da threads

Con gli altri browser funziona tutto (anche IE, c'e' qualcosa non va

)

Come ho scritto prima, oramai c'è un buon livello di supporto agli standard, inoltre quello che hai scritto fa uso solo di caratteristiche definite nel CSS2.1, divenuto standard da molto tempo.

30-01-2013, 18.09.30

Originalmente inviato da karl94

Ah, sì? Da quando?

Ahahah dico per sentito dire, perche' io ho sempre avuto problemi di questo tipo.

Comunqe, non mi ero accorto di aver inserito due volte a:link, ora ho modificato cosi'

Codice:

#menu a:link {font-color: #0060A0; font-size: 14px; text-decoration: none; font-family: arial, calibri;}
#menu a:hover {color: #333333; font-size: 14px; text-decoration: underline; font-family: arial, calibri;}
#menu a:visited {color: #0060A0; font-size: 14px; text-decoration: none; font-family: arial, calibri;}

e il colore e' corretto, ma a:hover non funziona.

l'HTMl e' questo:

Codice HTML:

<?php
require 'config.php';
require 'connect.php';
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head> 

<link rel="stylesheet" href="css.css" type="text/css" />
<title>Threads</title>

</head>


<body>

<div id="container">

<div id="upper"></div>

<br />
<br />

<!-- Inizio colonna sinistra -->
<div id="left">

<!-- Inizio menu -->
<div id="menu">

<div id="menu_home">
<a href="http://www.threads.altervista.org/Index.php">Home</a>
</div>
<div id="menu_cat">
<a href="http://www.threads.altervista.org/Index.php?mode=cat">Categorie</a>
</div>

</div>
<!-- Fine menu -->

Effettivamente #menu si trova dentro a #left, ma non mi pare influisca, perche' non si "scambiano" attributi, semplicemente non si attivano quelli richiesti.

comunque ho modificato e ora al posto di assegnarli a left li ho assegnati a #last1

Codice PHP:


echo '<div id="last1">' . '<h5>' . $username . '</h5>' . '<h4>' . '[' . $upcat . '] ' . '</h4>' . '<h3>' . $title . '</h3>'  . '<br />' . '<span class="date">' . $date_time . '&nbsp;' . '|' . '</span>' . '<span>' . '&nbsp;' . '<a href="http://www.threads.altervista.org/topic?id='. $id . '">' . 'Vai alla discussione'. '</a>' . '</span>' . '</div>';

Quindi ora ho

Codice:

#menu a:link {font-color: #0060A0; font-size: 14px; text-decoration: none; font-family: arial, calibri;}
#menu a:hover {color: #333333; font-size: 14px; text-decoration: underline; font-family: arial, calibri;}
#menu a:visited {color: #0060A0; font-size: 14px; text-decoration: none; font-family: arial, calibri;}

e

Codice:

#last1 a:link {color: #AAAAAA; font-size: 12px; font-family: arial, calibri; text-decoration: none;}
#last1 a:hover {color: #E56717; font-size: 12px; text-decoration: underline;}
#last1 a:visited {color: #AAAAAA; font-size: 12px; font-family: arial, calibri; text-decoration: none;}

ma non funziona ugualmente.

**dreadnaut** · 30-01-2013, 18.23.31

C'è un sacco di roba ridondante in quelle regole; se il resto del css è così, rischi di avere regole sovrapposte e problemi... esattamente tipo quelli che incontri

Ogni volta che stai per ripetere un attributo che hai già messo da qualche parte, fermati un secondo e chiediti se non puoi metterlo a monte nella gerarchia della pagina.

Un esempio può essere font-family: in una pagina userai al massimo uno o due font, quindi non dovresti specificarli direttamente per i link, ma per il body della pagina, o i contenitori principali. Riscriverei così:

Codice:

body {
  /* prima il font più specifico, poi quello più diffuso, poi la classe generale come fall-back */
  font-family: Calibri, Arial, sans-serif;

  /* dimensione base per l'intera pagina, ed aggiungiamo l'interlinea per leggibilità */
  font-size: 14px/1.35;
}

#menu a {
  color: #0060A0;
  text-decoration: none;
}

#menu a:hover {
  color: #333;
  text-decoration: underline; /* sovrascrive il 'none' sopra */
}

#last1 a {
  color: #AAA;
  font-size: 12px;
  text-decoration: none;
}

#last1 a:hover {
  color: #E56717;
  /* font-size è già definito sopra per "#last1 a", inutile ripeterlo */
  text-decoration: underline;
}

Ricorda che il CSS funziona a cascata, quindi le regole vengono lette ed applicate in sequenza, sovrascrivendo attributi. E' meglio quindi specificare valori generali per i contenitori, e poi valori specifici per i nodi più interni, solo quando cambia qualcosa.

30-01-2013, 19.02.23

Originalmente inviato da dreadnaut

C'è un sacco di roba ridondante in quelle regole; se il resto del css è così, rischi di avere regole sovrapposte e problemi... esattamente tipo quelli che incontri

Ogni volta che stai per ripetere un attributo che hai già messo da qualche parte, fermati un secondo e chiediti se non puoi metterlo a monte nella gerarchia della pagina.

Un esempio può essere font-family: in una pagina userai al massimo uno o due font, quindi non dovresti specificarli direttamente per i link, ma per il body della pagina, o i contenitori principali. Riscriverei così:

Codice:

body {
  /* prima il font più specifico, poi quello più diffuso, poi la classe generale come fall-back */
  font-family: Calibri, Arial, sans-serif;

  /* dimensione base per l'intera pagina, ed aggiungiamo l'interlinea per leggibilità */
  font-size: 14px/1.35;
}

#menu a {
  color: #0060A0;
  text-decoration: none;
}

#menu a:hover {
  color: #333;
  text-decoration: underline; /* sovrascrive il 'none' sopra */
}

#last1 a {
  color: #AAA;
  font-size: 12px;
  text-decoration: none;
}

#last1 a:hover {
  color: #E56717;
  /* font-size è già definito sopra per "#last1 a", inutile ripeterlo */
  text-decoration: underline;
}

Ricorda che il CSS funziona a cascata, quindi le regole vengono lette ed applicate in sequenza, sovrascrivendo attributi. E' meglio quindi specificare valori generali per i contenitori, e poi valori specifici per i nodi più interni, solo quando cambia qualcosa.

Hai ragione. Ho ripulito un po', ho tenuto le dimensioni dei font specificate perche' variano in quasi ogni classe. Comunque ora ho questo:

#last1 a:link {color: #AAAAAA; font-size: 12px; text-decoration: none;}
#last1 a:hover {color: #E56717; text-decoration: underline;}
#last1 a:visited {color: #AAAAAA; text-decoration: none;}

E il problema persiste.

Non riesco proprio a capire perche' non funzioni l'hover. È definito per un box, dovrebbe essere tutto a posto. Infatti legge il text-decoration, ma non cambia colore.

In caso servisse, il foglio di stile completo: http://www.threads.altervista.org/css.css

30-01-2013, 19.06.10

Posta anche l'html così da controllare la disposizione.

30-01-2013, 19.12.20

Allora, questa la parte del menu:

Codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">

<head> 

<link rel="stylesheet" href="css.css" type="text/css" />
<title>Threads</title>

</head>


<body>

<div id="container">

<div id="upper"></div>

<br />
<br />

<!-- Inizio colonna sinistra -->
<div id="left">

<!-- Inizio menu -->
<div id="menu">

<div id="menu_home">
<a href="http://www.threads.altervista.org/Index.php">Home</a>
</div>
<div id="menu_cat">
<a href="http://www.threads.altervista.org/Index.php?mode=cat">Categorie</a>
</div>

</div>
<!-- Fine menu -->

E questo invece l'altro:

Codice HTML:

// Ultimi 3 thread
$read = mysql_query("SELECT * FROM threads ORDER BY id DESC LIMIT 0, 5");
while($temp = mysql_fetch_array($read) ){
    	$username = htmlentities($temp[username]);
	$id = $temp[id];
    	$title = htmlentities($temp[title]);
	$cat = htmlentities($temp[cat]);
	$upcat = strtoupper($cat);
    	$date_time = htmlentities($temp[date_time]);
    	


echo '<div id="last1">' . '<h5>' . $username . '</h5>' . '<h4>' . '[' . $upcat . '] ' . '</h4>' . '<h3>' . $title . '</h3>'  . '<br />' . '<span class="date">' . $date_time . '&nbsp;' . '&#124;' . '</span>' . '<span>' . '&nbsp;' . '<a href="http://www.threads.altervista.org/topic?id='. $id . '">' . 'Vai alla discussione'. '</a>' . '</span>' . '</div>';


}

?>

**dreadnaut** · 30-01-2013, 19.56.43

Più che scavare nel codice, apri il browser ed investiga li. Visita la pagina che da il problema, tasto destro sul link, e scegli "Inspect element" dal menù.

Chrome ti mostrerà il codice html e le regole css applicate ai vari tag: così puoi scoprire quali hanno priorità.

30-01-2013, 20.12.47

Originalmente inviato da dreadnaut

Più che scavare nel codice, apri il browser ed investiga li. Visita la pagina che da il problema, tasto destro sul link, e scegli "Inspect element" dal menù.

Chrome ti mostrerà il codice html e le regole css applicate ai vari tag: così puoi scoprire quali hanno priorità.

Finalmente ho risolto. Non ci volevo credere, ma il problema era quello. Sono giorni che ci sbatto la testa. E il problema e' quello. Davvero.

a:link{} evidentemente e' deprecato. Non lo sapevo.
a{} da solo funziona.

Va bhe' ahahahah

**dreadnaut** · 30-01-2013, 20.19.10

Argh, in effetti l'avevo rimosso sopra ma non avevo sottolineato la cosa, pensando funzionasse ancora

30-01-2013, 20.24.54

Originalmente inviato da dreadnaut

Argh, in effetti l'avevo rimosso sopra ma non avevo sottolineato la cosa, pensando funzionasse ancora

Non ci avevo fatto caso. Mi devo aggiornare con i CSS

**karl94** · 30-01-2013, 20.30.59

Cosa? a:link deprecato? Da chi? Quando?

30-01-2013, 20.40.12

Originalmente inviato da karl94

Cosa? a:link deprecato? Da chi? Quando?

Aiuto. No aspetta non volevo. Scusa ahahah

No ho detto forse e' deprecato. Perche' sostituendolo con un 'a' semplice mi funziona tutto.

Non volevo offendere nessuna funzionalita' del CSS

**karl94** · 30-01-2013, 20.45.56

Hmm, credo di aver capito il problema: è una questione di specificità e di ordine di applicazione delle regole CSS, non di selettori deprecati.
Ogni selettore CSS ha una propria specificità, calcolata seguendo determinate regole, se due proprietà vengono definite in blocchi i cui selettori hanno la medesima specificità la definizione che prevale è quella scritta per ultima.
In questo specifico caso (la prima porzione di codice) tutti e tre i selettori hanno medesima specificità, dunque se un collegamento è visitato e allo stesso tempo è sotto il cursore, il colore risultante sarà quello definito nella regola con selettore :visited.

Puoi provare un attimo a spostare il selettore con hover giusto sotto quello con visited (e reintrodurre link), giusto per controprova?

30-01-2013, 21.00.00

Originalmente inviato da karl94

Hmm, credo di aver capito il problema: è una questione di specificità e di ordine di applicazione delle regole CSS, non di selettori deprecati.
Ogni selettore CSS ha una propria specificità, calcolata seguendo determinate regole, se due proprietà vengono definite in blocchi i cui selettori hanno la medesima specificità la definizione che prevale è quella scritta per ultima.
In questo specifico caso (la prima porzione di codice) tutti e tre i selettori hanno medesima specificità, dunque se un collegamento è visitato e allo stesso tempo è sotto il cursore, il colore risultante sarà quello definito nella regola con selettore :visited.

Puoi provare un attimo a spostare il selettore con hover giusto sotto quello con visited (e reintrodurre link), giusto per controprova?

Eh gia'...

grazie mille, in questo modo funziona anche con a:link.

caso vuole che quando ho tolto link ho anche messo hover sotto visited, quindi pensavo che il funzionamento fosse dovuto a quello, invece conta la posizione.

**karl94** · 30-01-2013, 21.09.29

Solo in questo specifico caso (e in pochi altri) la posizione è determinante, se per esempio avessi usato come selettore :link:hover, :visited:hover, la specificità sarebbe stata maggiore e il problema non si sarebbe manifestato.

Come vedi, il tuo abusare del forum fa imparare nuove cosa anche a noi.

30-01-2013, 21.32.18

Originalmente inviato da karl94

Solo in questo specifico caso (e in pochi altri) la posizione è determinante, se per esempio avessi usato come selettore :link:hover, :visited:hover, la specificità sarebbe stata maggiore e il problema non si sarebbe manifestato.

Come vedi, il tuo abusare del forum fa imparare nuove cosa anche a noi.

Continuero' ad abusarne allora

Discussione: Problema visualizzazione link definiti in CSS con Google Chrome

LinkBack

Strumenti discussione

Display

Problema visualizzazione link definiti in CSS con Google Chrome

Regole di scrittura