background a:hover su immagini

[ragepunk]

ciao a tutti

ho un problemino di crossbrowser


allora, io ho delle immagini trasparenti linkate.
ai link ovviamente si collega l' a:hover che imposta il colore di bg (solitamente del testo)
ora le immagini sono più alte di una riga di testo, e su IE il colore del BG riempie tutta l'immagine, mentre su FF e altri browser il colore del BG rimane alto come una riga di testo.

c'è la possibilità di impostare chessò lo sfondo alto quanto l'immagine per FF ??

azzie

[Mich_]

Ha l'aria di esserci un errore nel CSS o nell'HTML.
Posta ambedue (magari solo la parte interessata).

Potrebbe essere necessario un clear, oppure definire float l'oggetto che contiene la tua immagine.

[ragepunk]

questo è il css per quanto riguarda l'hover

a:hover {
	font-family: Tahoma;
	color: #FFFFFF;
	background-color: #000000;
	text-decoration: none;
	height: 100%;
	background-repeat: repeat;
}

invece questo è l'html, ovvero il td che contiene l'immagine

<td colspan="3" >

</td>

[Mich_]

Ci sono attributi senza senso (non validi in quel contesto).

Ma posta anche il CSS del <td>, e di tutti gli stati dell' <a>, in particolare a:link o a da solo.

[ragepunk]

già che c'ero ho fatto un'immagine di come appare



questo è il css interessato

a:link {
	font-family: Tahoma;
	color: #0000CC;
	text-decoration: none;
}
a:visited {
	font-family: Tahoma;
	color: #0000CC;
	text-decoration: none;
}
a:hover {
	font-family: Tahoma;
	color: #FFFFFF;
	background-color: #000000;
	text-decoration: none;
	height: 100%;
	background-repeat: repeat;
}

.boxPixGalTit {
	font-family: Tahoma;
	font-size: 9px;
	color: #000000;
	width: 100%;
	filter: alpha(opacity=70);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
 -moz-opacity: 0.70; 				opacity:0.7;
	position: fissa;
	text-align: center;
	height: 93px;
}

questo l'html del table

il css sopra lo uso principalmente per i link
e poi già che c'ero l'ho usato anche per le immagini che devono avere gli stessi colori dei link (o perlomeno il BG)

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="boxPixGalTit">
<tr>
<td width="10%" height="12" valign="middle" bgcolor="<%=piXcolor%>">');" onmouseout="hideddrivetip();" >[img]../webgraphic/buttons/date.gif[/img]</td>
<td width="76%" valign="middle" bgcolor="<%=piXcolor%>"><%=pixArtist%></td>
<td width="14%" valign="middle" bgcolor="<%=piXcolor%>">
  <img onMouseOver="ddrivetip('<%=commentiCounts%> Comments');" onMouseOut="hideddrivetip();"  src="../webGraphic/icocomments.gif"  align="baseline"></td>
</tr>
<tr>
<td colspan="3" >[img]../webGraphic/trasparente.gif[/img]</td>
</tr>

</table>

[Mich_]

Ci sono vari problemi con quel codice.

1. Se usi i CSS non puoi usare anchele formattazioni mediante attributi HTML: creano confusione e fanno in modo che browser diversi interpretino in modo diverso.
Devi elimianre tutti gli attributi di formatazione HTML e spostarli nel CSS.

2. Nei link, la formattazione di base (:link o senza pseudoclasse) va realizzata completa, mentree nelle altre pseudoclassi devi metterci le variazioni rispetto a quella di base.
Quindi il tuo height:100% nell':hover non ha senso.

3. In un oggetto di tipo inline, non puoi definire dimensioni.

Concludendo, con un HTML del tipo:
<td><a href="../pix/?pixId=<%=pixId%>">
[img]../webGraphic/trasparente.gif[/img]
</a></td>

puoi assegnare questo CSS

.boxPixGalTit td {
  width: ???px;
  height: ???px;
}
.boxPixGalTit a {
  font-family: Tahoma, sans-serif;
  color: #00C;
  text-decoration: none;
  display: block;
  width: 100%; height: 100%;
  background-image: url(?????);  /* inserire nome file, oppure togliere il repeat */
  background-repeat: repeat;
}
.boxPixGalTit a:visited {
	color: #00C;
	text-decoration: none;
}
.boxPixGalTit a:hover {
  color: #FFF;
  background-color: #000;
  text-decoration: none;
}

[ragepunk]

si beh

sono un po' casinista -.-
più che altro non ho tantissimo tempo per star dietro a ste cose

cmq funziona alla perfezione



mo' lo sistemo a dovere



graaaaaaaaaaaaaaaaaaaaaazie infinite
mi ci barcollavo da tempo per sta cosa