rollover ed allineamento testo

[neorf]

Ciao, ho questa situazione:
Rollover creato con:

#bottone {
     float: left;
     
 display:block;
     list-style: none;
 line-height:150px;
     width: 72px; //inserire la larghezza dell'immagine di default
     height:150px;  //inserire l'altezza dell'immagine di default
     margin-left: 0;
     padding-left: 0;
     background-image: url("../images/storia_1_off.png");  
     background-repeat: no-repeat;
}

#bottone:hover {
     float: left;
     display:block;
     list-style: none;
line-height:150px;
     width: 72px; //inserire la larghezza dell'immagine di rollover
     height:150px;  //inserire l'altezza dell'immagine di rollover
     margin-left: 0;
     padding-left: 0;
     background-image: url("../images/storia_1_on.png");  
     background-repeat: no-repeat;
}

e poi nella pagina del testo

<th>Storia 1</th>

Ora, vorrei fare semplicemente, che il testo che appare sopra il rollover sia allineato in basso e non nel centro, come faccio?
Ho provato con vertical-align:bottom; all'interno del css, ma niente...
Thanks

neorf

[ricman]

Originariamente inviato da neorf

<th>Storia 1</th>

L'id lo dovresti usare quando hai un solo oggetto nella pagina (quindi è scorretto quando hai vari pulsanti che lo richiamano)

Originariamente inviato da neorf
Ora, vorrei fare semplicemente, che il testo che appare sopra il rollover sia allineato in basso

Prova ad aggiungeri un "line-height:...px" e vedi se migliora qualcosa. A me risolve spesso.

[neorf]

ho già messo line-height:150px; e praticamente si espande la dimensione del bottone, ma il testo me lo allinea sempre nel centro. Io vorrei il testo in basso.

[Another-Life]

Gestisci la sua posizione con i margini negativi^^

[neorf]

cioè? che dovrei fare per avere un'immagine di sfondo che cambia al passaggio del mouse ed all'interno della relativa cella ho il testo allineato in basso?
Thanks

[Another-Life]

Cella?? --->Le tabelle non devono essere utilizzate per realizzare il layout della pagina ma bensi devi utilizzare i Css.

Cmq la soluzione dovrebbe essere questa:

Assegni alla cella interessata questa proprietà:

margin: 0 0 -6px 0;

[neorf]

così mi si sposta tutto compreso lo sfondo, e la scritta rimane sempre a metà... Mi direste un modo, anche usando css lasciando stare le tabelle, per avere una struttura nella ho un bottone rollover realizzato con css, alto 150px e largo 72 px, dove in fondo, allineato alla base dello stesso, mi deve apparire la scritta che identifica il menù?
thanks

neorf

[Another-Life]

eh??...guarda che il margine negativo devi definirlo per l'elemento <a> contenuto nella cella^^

[neorf]

cioè metto:
a.label{
margin: 0 0 -60px 0;
}

e poi:
<th class="label">Storia</th>

?

[neorf]

ok, ho risolto mettendo così nel css:

table.topbannertable th.label1 {
width:236px;
		height:150px;
		background-image:url("../images/storia_1_off.png");
		background-repeat:no-repeat;
		background-position:center;
		border-bottom: 1px solid #ffffff;
vertical-align:bottom;
}

table.topbannertable th.label1:hover {
width:236px;
		height:150px;
		background-image:url("../images/storia_1_on.png");
		background-repeat:no-repeat;
		background-position:center;
		border-bottom: 1px solid #ffffff;
vertical-align:bottom;
}

ma come mai non mi funziona su IE ma solo su FIREFOX?
Thanks

neorf