Problema immagini di sfondo all' a:hover

[AXELTOPOLINO]

salve, sto creando un sito web, ho lavorato al progetto su altervista e l'ho testato oggi sul server di aruba (quello vero). Ho trasferito tutti i file e le immagini e il tutto, apparentemente, funziona perfettamente. Poi però ho incontrato un fastidioso errore: quando clicco su un link, il cui sfondo cambia al passaggio del mouse poichè ho impostato uno sfondo diverso all' a:hover, prima diventa bianco e poi carica l'immagine.
Ho dichiarato le dimensioni degli <a> che hanno lo sfondo che cambia, devo per caso dichiarare anche le dimensioni dell'immagine di sfondo?

Quando si clicca su una link prima compare bianco e poi si carica l'immagine di sfondo. Questo sul server di altervista non succedeva mentre su quello di aruba sì...come risolvo il problema? Grazie!

ps. credo sia un problema di CSS ma del resto questo è webdesign

[Myaku]

Originariamente inviato da AXELTOPOLINO
ps. credo sia un problema di CSS ma del resto questo è webdesign

se è un problema di css è un problema di codice, più che di webdesign. Ti sposto là.

ps: posta il link alla pagina, così da poter vedere il codice e il problema

[jubstuff]

Uhm, da come l'hai descritto il problema dovrebbe essere relativo al fatto che il browser non ha ancora scaricato l'immagine di sfondo. Succede sempre, oppure solo la prima volta che visiti il sito?
Se puoi fornisci anche un esempio

[AXELTOPOLINO]

No succede sempre, anche quando faccio il refresh della pagina.

Ho notato una cosa importante: adesso tutte le immagini di sfondo sono sul server di Aruba, mentre quando erano nel server di altervista non c'era questo problema...mi spiego meglio:

La pagina html e il css erano nel server di aruba mentre le immagini erano ancora sul server di altervista e tutto funzionava bene, poi quando ho trasferito anche le immagini sul server aruba (ovviamente modificando i link delle immagini nel css) è comparso il problema.

Devo per caso indicare le dimensioni di sfondo dell'immagine? Le immagini di sfondo sono sia gif che jpeg che png.

vi posto la parte del css realtiva al problema:
------------------------------------------
#mainmenu {
background-image: url(http://internethome.altervista.org/I.../bg_menusx.gif);
background-repeat: repeat-y;
}

#mainmenu a {
float: left;
line-height: 30px;
width: 187px;
height: 29px;
color: #ffffff;
text-align: center;
text-decoration:none;
background: url(http://internethome.altervista.org/I...ionemenusx.gif);
border-left:0px solid #FFF;
overflow:hidden; /* fixed IE display bug */
}

#mainmenu a:hover {
background: url(http://internethome.altervista.org/I...enusxhover.gif);
}

Questa è la pagina sul server altervista: http://internethome.altervista.org/bbb.php

vorrei evitare di postare anche il link del server aruba poichè il proprietario mi ha detto "solo se strettamente necessario" Riuscite a darmi una mano con solo questi dati?

Grazie!

[AXELTOPOLINO]

No, mi correggo:

prima utilizzavo explorer come browser e adesso ho provato con firefox:

con explorer il problema si presenta ogni volta che passo sopra agli <a> mentre in firefox il problema si presenta solo quando clicco per la prima volta su di un link...


come risolvo il problema definitivamente? esiste per caso una procedura che carica tutte le immagini della pagina prima del caricamento della stessa?

[H5N1_Aviaria]

Usa degli sprite: si tratta di una tecnica in cui l'immagine è una sola.
Cerca su html.it e troverai...

[AXELTOPOLINO]

H5N1_Aviaria grazie!

Credo di aver capito l'essenziale:
la POSIZIONE dello sfondo cambia al cambiare dello stato del link in questione!

L'immagine è una sola e il browser non deve caricare un'altra immagine ma solo spostare la sua posizione giusto? Fantastico

[H5N1_Aviaria]

Esatto.
Pensa che usavo questa tecnica prima ancora che qualcuno le desse un nome...

[AXELTOPOLINO]

Si, sai che la uso anche io (ma per altri scopi) ?
Ho avuto difficoltà a capire l'articolo (letto in fretta e furia) proprio perchè non mi capacitavo della semplicità della cosa
Provato e funziona perfettamente.
I vantaggi sono questo e che hai meno immagini diverse per ogni link
Ancora grazie!