[IE6] problemi con menu in stato hover circa span contenente immagine

[gabar-el]

ciao, sto cercando di risolvere una questione con questo menu circa lo span hover, purtroppo in ie mi fa riferimento alla larghezza dello span nell'a e non nell'ul come negli altri browser. Andando sull'hover l'immagine contenuta nello span ad altezza 100% mi rimane il 100% dell'a, come posso fare per fargli prendere il 100% dall'ul?
grazie

html:
<div id="containPort">
<ul id="portfolio">[*]<span>[img]images.jpg[/img]</span>[/list]
</div>


css:
div#containPort {position:relative; min-width:250px; width:64%; height:600px; margin:25px auto 0;}
div#containPort ul {width:250px; height:100px; margin:25px 0 0; position:relative; list-style-type:none;}
div#containPort img {border:1px solid #e8e8e8; width:100%;}
div#containPort li {display:block; width:60px; height:48px; margin:2px 1px; float:left;}
div#containPort a {display:block; width:58px; height:46px; line-height:46px; border:1px solid #e8e8e8; text-align:center;text-decoration:none;}
div#containPort a span {display:none; width:100%;}
a:link#thumbPort1, a:visited#thumbPort1, a:active#thumbPort1 {background:url(images.png);}
a:hover#thumbPort1, a:focus#thumbPort1 {background:#ffd610; color:#000;}
a:hover#thumbPort1 span, a:focus#thumbPort1 span {display:block; position:absolute; left:0; top:110px; width:100%;}

[gabar-el]

uppete....

[Mich_]

La differenza piu` importante tra i box model standard e di IE sta nella diversa interpretazione di border e padding: negli standard questi sono esterni al width, in IE sono interni.

Il trucco piu` semplice e` quindi evitare di usare padding e border: non sempre e` possibile, ma in qualche caso un padding puo` essere sostituito da un margin del blocco piu` interno. Nel tuo caso mi par di capire che la cosa e`possibile.
In alternativa devi ridefinire width per IE mediante commenti condizionali.

Pero` se fossi in te, io cercherei di semplificare la marcatura: uno span che contiene esattamente e solo un'img, forse e` inutile (si puo` applicare all'img quello che applicheresti allo span)

Altro modo per correggere e` usare XHTML Strict: con tale DTD, anche IE si comporta quasi come i browser standard.

[gabar-el]

non mi pare di avere problemi di padding, e la mia dtd è una xhtml 1.0. Inoltre il css in questione è dedicato a ie (5.5 e 6). Il mio problema è un contesto di dimensioni in relazione ai contenuti. Infatti avevo già provato ad applicare la cosa all'immagine solamente, ma il succo non cambia.
grazie

[Mich_]

div#containPort a {display:block; width:58px; height:46px; line-height:46px; border:1px solid #e8e8e8; text-align:center;text-decoration:none;}

In effetti ho fatto un po' di confusione: il tuo e` un problema di border, che pero` si puo` risolvere con uno sfondo opportuno nel contenitore e nel contenuto ed un margine nel contenuto.

Comunque la DTD per portare IE6 al modo standard deve essere almeno
XHTML 1.o Strict.
La transitional fa interpretare in quirks mode (cioe` in modo retrocompatibile)

[gabar-el]

la mia è una strict, e no, non ho problemi di border. Il mio problema (forse mi ero spiegato male) è che non riesco a dare allo span dimensioni in %, se lo faccio mi prende come riferimento l'a, e mi da lo span al 100% (per es.) dell'a (che ha dimensioni fisse, quindi viene delle stesse dimensioni). Questo me lo fa solo con ie6 e inferiori ovviamente e non capisco da cosa è dato. Io vorrei invece che tenesse lo span in relazion all'ul (come negli altri browser), in modo che l'immagine sia ridimensionabile come lo è l'ul (quindi accessibile anche a diverse risoluzioni). Al momento il meglio che ho potuto fare è stato dare all'ul dimensioni fisse e stessa cosa per lo span, così non ci sono "sbordamenti" di nessun tipo.
lascio qualche screen delle condizioni di errore per mostrare meglio.

come vede ff (e altri browser). Il risultato che vorrei ottenere:




come vede ie6 e inferiori. Lo span prende il 100% dell'a e rimane piccolo:



grazie

[Mich_]

La % delle dimensioni si rifierisce al contenitore diretto. Unica eccezione se ci sono dei posizionamenti e/o dei float, che e` proprio il tuo caso.

In pratica oggetti non flottati non vengono visti come figli dei float (nei browser standard), mentre lo sono in IE. E questo anche con DTD XHTML Strict, se ricordo bene.

Per come la vedo io (ma in questo potrei sbagliare), dovresti fare in modo di forzare gli <a> ad entrare nei[*], e questo lo si ottiene in due modi alternativi:
- facendo diventare float anche gli <a>
- mettendo un clear dopo i[*] (vedi pillola di fcaldera *)
Nota che ambedue questi metodi possono avere degli effetti collaterali: con il primo penso che dovrai poi far diventare float tutti gli oggetti interni al[*], con il secondo potresti avere degli spazi non voluti.


Come forse avrai notato io sto lavorando con una prospettiva diversa dalla tua: in pratica sto partendo dall'assunzione che nel tuo layout c'e` un errore, e che tale errore "salta fuori" solo con IE: e` un modo di procedere che "rovescia i ruoli" rispetto al solito.
Non sto dicendo che il tuo modo di procedere e` sbagliato (e il fatto che funziona nei browser standard lo dimostra), ma sfruttare le caratteristiche "spinte" dei CSS standard, ti porta a difficolta` con il cross-browser, e non lo ritengo utile ad avere risultati pratici.
In pratica dato che non puoi "cambiare la testa" ad IE, puoi lavorare con dei compromessi, che permettono di far funzioanre la cosa in tutti i browser (e non e` solo un problema di IE, ma di alcune versioni di browser un po' datate).


* [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

[gabar-el]

grazie dei consigli Mich_
io le ho provate un pò tutte, ma non sono riuscito a risolvere
Per quanto possa valere, a mio modo di vedere non è quello il problema, infatti dando agli span delle dimensioni fisse tutto funziona bene (o forse non ci ho capito molto io...), fondamentalmente per funzionare funzia lo stesso poi, solo che prende dimensioni errate, ma a quanto pare dargli float o "pulire" ciò che viene dopo, non sortisce alcun effetto nel mio caso.

In pratica dato che non puoi "cambiare la testa" ad IE, puoi lavorare con dei compromessi, che permettono di far funzioanre la cosa in tutti i browser

visto quanto hai detto, direi che opto per questa soluzione, opzione che avevo già considerato, sebbene mi sarebbe piaciuto risolvere. Quindi o lascerò su questo browser (ho un css apposito, quindi posso essere un pò più libero) delle dimensioni fisse e dichiarerò la pagina ad accessibilità A o cambierò la tipologia di portfolio che devo realizzare, tenendo appunto buono ciò che hai detto sopra.

grazie cmq dei consigli che mi hanno insegnato ancora una volta qualcosa....