Problema con ImageButton e Css

[Controvento82]

Salve a tutti, probabilmente è una sciocchezza, ma di certo è una di quelle da cui sembri non venirne a capo.
Ho un oggetto ImageButton molto semplice:

<asp:ImageButton ID="ImgShortBar2" runat="server" ImageUrl="~/Resources/dovesiamo.png" PostBackUrl="~/OurCompany/Contacts.aspx" />

Funziona benissio, senza nessun problema...ma aggiungo un file Css per riposizionarlo in un foglio di stile:

#ImgShortBar2
{
position:absolute;
z-index:20;
margin-left:70%;
margin-top:20%;
width:12%;
height:3%;
}

Ecco, che l'oggetto si riposiziona perfettamente, ma se passo col mouse sopra l'immagne non compare più la manina, e perdo l'evento Click (indipendentemente dalle proprietà contenute nel css).

Dov'è l'inciampo?

[pietro09]

io ho provato il tuo codice e va con tutti i browser (IE8, Firefox, Opera, Safari, Chrome)

[djciko]

anche a me funziona praticamente su tutto, con la manina ed il click tenta di accedere alla pagina dei contatti, ma forse e' che noi abbiamo provato soltanto con il codice da te fornito, senza il resto della tua App...

[softgens]

Se non stai utilizzando .NET 4 il vero nome del tuo control (che sia ImageButton o altro non è importante) viene modificato a run time.

Verifica il risultato della pagina all'interno del browser è vedrai che il tuo ID diventa qualcosa del tipo ID="ctl00_ImgShortBar2"

Per risolvere semplicemente il problema aggiungi il tag CssClass:

<asp:ImageButton ID="ImgShortBar2" cssClass="ImgShortBar2" runat="server" ImageUrl="~/Resources/dovesiamo.png" PostBackUrl="~/OurCompany/Contacts.aspx" />

e nel foglio di stile sostituisci #ImgShortBar2 con .ImgShortBar2

[Controvento82]

Uso VS2010, ma sto lavorando col Framework 2.0, a detta di VS2010, il tag CssClass non è supportato, in ogni caso, non è un problema di id, così fosse non vedrei il CSS, e gli oggetti non si riposizionerebbero come dovrebbero.

Il problema l'ho risolto a qualche giono di distanza con un po' di mente fresca, ho provato a spostare i controlli e funzionavano ovunque, tranne che in quella data locazione.

Ne ho dedotto dunque il problema, in realtà un'immagine centrale a quanto pare si espandeva oltre il visibile con lo sfondo.
Essendo lo sfondo trasparente non era evidente che questo coprisse gli oggetti imagebutton, ovviamente passandoci poi sopra non ero realmente sul pulsante, quanto sullo sfondo trasparente di un'altra immagine.
Quest'ultima aveva infatti lo stesso z-index ed era collocata giusto un rigo sotto i due imagebutton.

E' stato sufficiente assegnare ad entrambi z-index=30, ed il problema si è risolto.

Ringrazio comunque tutti per i suggerimenti, mi hanno comunque dato la certezza che il codice era corretto.

[GabbOne]

ti consiglio in questi casi di utlizzare, ad esempio,google chorme che ti da una visuale di tutte le regole che vengono applicate ad un elemento specificando anche da dove provengono... in questo modo puoi controllare quali sono le regole che vanno in conflitto e agire di conseguenza

Su google chrome ti basta selezionare l'elemento da controllare dalla pagina visualizzata nel browser e cliccare il tasto dx dell'elemento e fare "Ispeziona elemento"