Problema Css rollover

[Airone]

Salve ragazzi, ho un problema con dei pulsanti che ho realizzato utilizzando i css.

Nel momento in cui viene passato il mouse sul pulsante viene caricata l'immagine di rollover con un piccolo ritardo che crea un fastidioso effetto. Come posso risolvere?

Altro problema quando vado a caricare questa pagina, http://www.iannamicoliquori.com/it/azienda.html , si crea una banda bianca sul fondo e premendo il tasto F5 (aggiorna pagina) la banda scompare.

Altro problema in questa pagina http://www.iannamicoliquori.com/it/prodotti.html con IE tutto ok ma su firefox l'elenco è leggermente spostato sul background

Qualcuno mi consiglia?

[gabar-el]

per il primo problema non so, mi pare lo faccia solo la prima volta, forse può essere dovuto al fatto che all'interno dei link non vi è nulla poichè fai tutto con le immagini, avresti potuto lasciare al meno il testo.

il secondo problema non lo vedo, su che browser?

il terzo problema è dato dal fatto che hai usato dei tag p per fare un elenco invece che ul e li, prova a sostituirli, anche perchè è più corrretto.

[fcaldera]

Originariamente inviato da Airone
Nel momento in cui viene passato il mouse sul pulsante viene caricata l'immagine di rollover con un piccolo ritardo che crea un fastidioso effetto. Come posso risolvere?

cerca "fast rollover" sul forum e/o su google, è una tecnica piuttosto diffusa.

Originariamente inviato da Airone
Altro problema quando vado a caricare questa pagina, http://www.iannamicoliquori.com/it/azienda.html , si crea una banda bianca sul fondo e premendo il tasto F5 (aggiorna pagina) la banda scompare.

Con quali browser si verifica? Con quali invece no?

Originariamente inviato da Airone
Altro problema in questa pagina http://www.iannamicoliquori.com/it/prodotti.html con IE tutto ok ma su firefox l'elenco è leggermente spostato sul background

Una lista di prodotti va formattata con una lista non ordinata (<ul>[*]<a>...)
il punto elenco va messo come sfondo 'center left' dell'[*] e il testo contenuto va distanziato con un padding-left

[Airone]

il problema della fascia bianca si presenta con I.E. , è come se non caricasse del tutto lo sfondo del body.

Ho provato a fare una lista con i tag <ul> e[*] ma non riesco a dare un colore un colore diverso al marcatore rispetto al testo. Caricando un'immagine, list-style-image: url(marcatore.gif); non mi viene centrata in modo verticale rispetto al testo ma leggermente sopra.

Secondo voi è meglio racchiudere tutto il sito in una tabella formattata con i css?

Vi ringraioe cmq per l'aiuto che mi state dando.

[gabar-el]

non si tratta di uno spazio bianco, ma di una barra di scorrimento orizzontale, ne deduco ci siano problemi di layout in quanto a dimensioni....

attento a ciò che a detto fcaldera, ti ha consigliato di utilizzare un'immagine di sfondo, e non ciò che hai detto tu, quindi metterai un background-image con l'immagine di un punto e lo posizionerai left, giocherai poi con i padding per visualizzarlo bene.

le tabelle vanno implementate solo in contesti di dati tabellari, e non mi pare il tuo caso. Hai varie liste ed è giusto che applichi ul e li, poi con ciò che ti è stato detto risolvi il problema del punto nelle liste.

per quanto riguarda la barra attendiamo altri pareri, senza valutare il codice è un pò difficile....

[Airone]

Originariamente inviato da gabar-el
non si tratta di uno spazio bianco, ma di una barra di scorrimento orizzontale, ne deduco ci siano problemi di layout in quanto a dimensioni....

attento a ciò che a detto fcaldera, ti ha consigliato di utilizzare un'immagine di sfondo, e non ciò che hai detto tu, quindi metterai un background-image con l'immagine di un punto e lo posizionerai left, giocherai poi con i padding per visualizzarlo bene.

le tabelle vanno implementate solo in contesti di dati tabellari, e non mi pare il tuo caso. Hai varie liste ed è giusto che applichi ul e li, poi con ciò che ti è stato detto risolvi il problema del punto nelle liste.

per quanto riguarda la barra attendiamo altri pareri, senza valutare il codice è un pò difficile....

quindi per la lista non devo usare un'immagine per il marcatore ma uno sfondo per il <LI> e giocare con il padding.

La banda bianca non è una barra di scorrimento ma semplicemente una parte del body che non viene colorata del colore di sfondo. Aggiornando la pagina la banda bianca scompare.

Ho poi dei problemi di visualizzazione sui Mcintosh... anche se non me ne faccio un problema

Per il "fast rollover" ho trovato questo articolo: http://css.html.it/articoli/leggi/37...oad-via-css/3/

[gabar-el]

io riesco a vedere su ie6 e ie8, sul primo non ci son problemi, sul secondo ripeto quanto detto, e aggiornando non cambia nulla....

[Airone]

questo è il css che gestisce le pagine

body

{
background: #f0e6c5;
text-align: center;
margin: auto;

}



#container {

width: 780px;
text-align: center;

}


#azienda{
float: right;
margin-top: 56px;

}




h1{

font-family: verdana,sans-serif;

font-size: 15pt;

color: #caab10;

}


a:link{
color: #44423c;

}

a:visited{

color: #9a3535;

}

p {

line-height: 18pt;
font-family: arial;
font-size: 7pt;
color: #44423c;
padding-left: 16pt;
padding-top: 7pt;


}

a:hover{


color: #9a8835;

}

table.tabella{


table-layout: fixed;

width: 780px;

border-collapse: collapse;

text-align: left;

margin: auto;


}

.cella1{


width: 726px;

}

table.tabella_header{


table-layout: fixed;

width: 780px;

border-collapse: collapse;

margin-top: 0px;

}

.button_home{

width: 129px;
height: 23px;
}

.button_home a{

display: block;
width: 129px;
height: 23px;
background: url(../immagini/button/banner_02.jpg);
}

.button_home a:hover {
display: block;
width: 129px;
height: 23px;
background: url(../immagini/button/premuto_02.jpg);
}

.button_azienda{

width: 131px;
height: 23px;
}

.button_azienda a{

display: block;
width: 131px;
height: 23px;
background: url(../immagini/button/banner_03.jpg);
}

.button_azienda a:hover {
display: block;
width: 131px;
height: 23px;
background: url(../immagini/button/premuto_03.jpg);
}

.button_prodotti{

width: 132px;
height: 23px;
}

.button_prodotti a{

display: block;
width: 132px;
height: 23px;
background: url(../immagini/button/banner_05.jpg);
}

.button_prodotti a:hover {
display: block;
width: 132px;
height: 23px;
background: url(../immagini/button/premuto_05.jpg);
}

.button_arearis{

width: 130px;
height: 23px;
}

.button_arearis a{

display: block;
width: 130px;
height: 23px;
background: url(../immagini/button/banner_06.jpg);
}

.button_arearis a:hover {
display: block;
width: 130px;
height: 23px;
background: url(../immagini/button/premuto_06.jpg);
}

.button_contatti{

width: 128px;
height: 23px;
}

.button_contatti a{

display: block;
width: 128px;
height: 23px;
background: url(../immagini/button/banner_07.jpg);
}

.button_contatti a:hover {
display: block;
width: 128px;
height: 23px;
background: url(../immagini/button/premuto_07.jpg);
}

.button_onore{

width: 130px;
height: 23px;
}

.button_onore a{

display: block;
width: 130px;
height: 23px;
background: url(../immagini/button/banner_04.jpg);
}

.button_onore a:hover {
display: block;
width: 130px;
height: 23px;
background: url(../immagini/button/premuto_04.jpg);
}

.button_magia{

width: 248px;
height: 66px;
float: right;
}

.button_magia a{

display: block;
width: 248px;
height: 66px;
background: url(../immagini/azienda/butt_magia.jpg);
}

.button_magia a:hover {
display: block;
width: 248px;
height: 66px;
background: url(../immagini/azienda/butt_magia.jpg);
}

.button_prod{

width: 165px;
height: 66px;
float: right;
}

.button_prod a{

display: block;
width: 165px;
height: 66px;
background: url(../immagini/azienda/butt_prod.jpg);
}

.button_prod a:hover {
display: block;
width: 165px;
height: 66px;
background: url(../immagini/azienda/butt_prod.jpg);
}

.button_storia{

width: 130px;
height: 66px;
float: right;
}

.button_storia a{

display: block;
width: 130px;
height: 66px;
background: url(../immagini/azienda/butt_storia.jpg);

}

.button_storia a:hover {
display: block;
width: 130px;
height: 66px;
background: url(../immagini/azienda/butt_storia.jpg);
}


#cella_prodotti1 {

width: 129px;
height: 356px;
background: url(../immagini/prodotti/ProdottiRGB_04.jpg);
float: left;
text-align: left;
background-repeat: no-repeat;


}


#cella_prodotti2{

width: 170px;
height: 356px;
background: url(../immagini/prodotti/ProdottiRGB_05.jpg);
float: left;
text-align: left;
background-repeat: no-repeat;

}

#cella_prodotti3{

width: 241px;
height: 356px;
background: url(../immagini/prodotti/ProdottiRGB_06.jpg);
float: right;
text-align: left;
background-repeat: no-repeat;
}

.testo_menu_prodotti{

line-height: 18pt;
font-family: verdana;
font-size: 7pt;
color: #44423c;
padding-left: 16pt;



}

#cella_contatti1{

width: 230px;
height: 143px;
background: url(../immagini/contatti/Pagina-ContattiRGB_09.jpg);
float: left;
text-align: center;
background-repeat: no-repeat;
}

#cella_contatti2{

width: 230px;
height: 73px;
background: url(../immagini/contatti/Pagina-ContattiRGB_12.jpg);
float: left;
text-align: center;
background-repeat: no-repeat;
}


.testo_contatti{

line-height: 8pt;
font-family: verdana;
font-size: 8pt;
color: #44423c;
padding-top: 50pt;
padding-left: 6pt;
font-weight: bold;



}

.testo_contatti2{

line-height: 10pt;
font-family: verdana;
font-size: 8pt;
color: #44423c;
padding-top: 10pt;
padding-left: 6pt;
font-weight: bold;



}

.testo_storia{

line-height: 10pt;
font-family: verdana;
font-size: 8pt;
color: #44423c;
padding-left: 16pt;


}

#menu_storia{

float: left;
width: 501px;
height: 277px;
text-align: left;

}

#testo_produzione{

float: left;
width: 634px;
height: 233px;
text-align: left;
}

.testo_produzione{

line-height: 10pt;
font-family: verdana;
font-size: 8pt;
color: #44423c;
padding-left: 10pt;
padding-top: 0;

}

[gabar-el]

prova a dare dei bgcolor alle varie sezioni, ti serivrà per capire come si sono posizionati i vari div sulla pagina, da li dovresti essere in grado di capire cosa fa vedere quella spaziatura bianca....

la vedi su ie7?