[CSS] Position relative e IE

[pezzo]

Ciao!

ho affiiancato ad ogni link testuale di un menu una piccola immagine allineata attraverso position:relative.

Su Firefox tutto ok, su IE vengono allineati tutti i link del menu all'img che ha position relative.

Ecco il codice:

CSS:

div#navigation{background-color:#9cf}

div#navigation img {position:relative; top:5px; padding: 0 3px 0 0;}

div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0; font-size: 9px;} 
div#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #fff;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none} 

HTML:

<ul>[*]
<a id="activelink" href="#">
[img]immagini/mela.gif[/img]
bla bla bla</a>
[*]
[url="#"]bla bla bla[/url]
[/list] 

IE ha problemi anche con position:relative?

[pierofix]

I posizionamenti sono un tasto dolente un po' per tutti i browser.

A occhio, però, direi che tu puoi risolvere in modo molto più elegante, aggirando completamente l'uso dei posizionamenti: ti basta usare degli sfondi.

Sì, degli sfondi. Innanzitutto perchè quelle immagini non fanno parte del contenuto, ma sono più di contorno, hanno più impronta grafica.

Attribuisci quindi ad ogni link del menu un id distintivo ed applica ad ognuno di essi l'immagine di sfondo, dando un padding a sinistra per far rientrare il testo del link e lasciare così spazio alla mela e agli altri frutti.

[pezzo]

Ok, capito... a proposito di posizionamenti! per realizzare il seguente allinemento ho usato il position: absolute per l'img:



C'era un modo più elegante?

Sono due div quello giallo contiene quello verde e l'immagine è posizionata in modo assoluto.

Se facevo flottare il verde, mi sballava la lunghezza del giallo... e considerato che il testo sarà dinamico e di lunghezza variabile mi è sembrata la soluzione più semplice...

PS:
Sei mitico Pierofix!

[index]

avrei potuto consigliarti il :before ma... quel maledetto IE non lo supporta.

[pierofix]

Originariamente inviato da pezzo
Se facevo flottare il verde, mi sballava la lunghezza del giallo... e considerato che il testo sarà dinamico e di lunghezza variabile mi è sembrata la soluzione più semplice...

E flottare l'immagine a destra? In questo modo di basterebbe impostare un margine destro al contenitore del testo e saresti a posto.

Per il menu, allora, sicuro che è tutto ok? Vuoi provare a postarci il codice che pensi di usare, così da toglierci ogni dubbio ed evitare incomprensioni?

[pierofix]

Originariamente inviato da index
avrei potuto consigliarti il :before ma... quel maledetto IE non lo supporta.

Eh già, peccato.

Però, scusa, non capisco una cosa. Come lo impiegheresti il before, in questo caso? In accoppiata con la proprietà 'content'? Non mi pare che essa sia in grado di generare markup, ma solo testo puro.

Mi hai incuriosito.

[index]

Io ricordo di aver effettuato una prova "illegale" su FireFox e ricordo anche un mezzo sorriso.

Io che sorrido... è raro.

[pierofix]

Ok, mi fa piacere per te. Ci faresti però anche vedere il codice che hai usato?

[pezzo]

Grazie pierofix, ho messo il float a destra...

Quanto al menu, ho capito... ma cmq appena lo faccio vi posto il codice...

grazie mille guru

PS:
Che ne pensi di questo libro della apogeo? Vorrei comprare un volume in italiano sui css...

[pierofix]

Originariamente inviato da pezzo
Quanto al menu, ho capito... ma cmq appena lo faccio vi posto il codice...

Ok.

Che ne pensi di questo libro della apogeo? Vorrei comprare un volume in italiano sui css...

Non l'ho letto ma ne ho sentito parlare molto bene. Daltronde, Gianluca Troiani è Gianluca Troiani! Se non ricordo male, dovresti trovare una discussione qui sul forum tutta dedicata a quel libro.

Non perderti anche questa lettura, fondamentale per capire davvero che cosa è il World Wide Web:

- L'architettura del nuovo web

Vuoi sapere chi è l'autore? Semplicemente l'inventore stesso del www . Mi fiderei della qualità dei contenuti.