Posizione immagine con browser diversi

[Diddl2]

Buonasera a tutti!

Da principiante con scarse conoscenze sono riuscita a costruire un mio sito, non sarà niente di speciale, ma a me va bene così. Tranne un piccolo problema che non riesco a risolvere.

Il sito è in pratica un insieme di photogalleries realizzate con Galleriffic 2.0 che ho personalizzato come mi piaceva, modificando il css secondo le istruzioni date. Tutto ok tranne che per un div contenente un'immagine che, a seconda dei browser utilizzati, viene posizionato orizzontalmente in maniera diversa. La parte del css relativa al div è questa:

div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;

In base alla mia grafica ho fatto solo questa modifica: top: 64;

Fino a poco tempo fa usavo Explorer 8 e su questo brower avevo basato il mio sito. Ora sono passata a un nuovo computer con Explorer 10 ed ho notato che l'immagine è molto più in basso, ovviamente non ci becca più con il resto. Potrei cambiare la posizione, ma chi ha una versione di Explorer più vecchia avrebbe il problema opposto. Poi bisognerebbe considerare anche gli altri browsers...

La mia domanda è questa: è possibile impostare valori diversi per browsers diversi?

Ho provato a cercare in giro ed ho trovato questo, ma non funziona:

div.slideshow span.image-wrapper {
display: block;
position: absolute;
[if gte IE 9] top: 0; (<-- questo)
top: 64;
left: 0;

Perchè è sbagliato? Cosa posso fare? Mi andrebbe bene anche un modo che faccia accedere browsers diversi a css diversi.

Grazie per l'aiuto!

[Prill]

eventualmente sarebbe:

<!--[if gte IE 9]>
<style type="text/css">
div.slideshow span.image-wrapper {
top:0;
}
</style>
<![endif]-->

oppure se vuoi inserire un css esterno con le regole per Explorer crei il css e lo richiami nella pagina

il commento condizionale non va dunque indicato all'interno del css

comunque dopo il valore di top va spescificata l'unità di misura (che può essere omessa se il valore è 0 ma va indicata altrimenti: top:64px;

[Diddl2]

Grazie per il tuo aiuto!

Ora provo con il secondo modo che mi hai consigliato.

Invece per il primo, credo che non sia giusto perchè non mi sono spiegata bene, sorry! La parte di codice che avevo provato, cioè questa:

div.slideshow span.image-wrapper {
display: block;
position: absolute;
[if gte IE 9] top: 0;
top: 64; 
left: 0;

non si trova all'interno di una pagina html, ma è una parte del css esterno. In questo caso come va messa?

[Prill]

Nel css per tutti i browser avrai:

div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 64px; 
left: 0; 
}

nel css solo per Explorer che creerai:

div.slideshow span.image-wrapper {
top: 0; 
}

nella tua pagina html, dopo il richiamo del css per tutti i browser avrai il css per Explorer (che sovrascriverà il valore di top):

oppure potrai inserire il css per Explorer all'interno della pagina sempre fra commenti condizionali (vedi codice post precedente) e sempre dopo il richiamo dell'altro css.

[Diddl2]

Funziona! Grazie 1000!

Chiedo ancora due cose velocissime, così faccio tutto insieme visto che devo aggiungere quella parte in tutte le mie pagine html.

1) Posso aggiungere tutti i richiami che voglio, vero? A questo punto vorrei fare la stessa cosa anche per i browsers Firefox a Google Chrome, ho visto nelle statistiche che una percentuale di visitatori li usa. Come bisogna indicarli? Intendo dire: IE sta per Explorer, per gli altri due?

Io farei così, dimmi se è giusto:

<link rel="stylesheet" type="text/css" href="css.css" /> (questo è il css principale, per tutti i browsers)

2) La gallery che uso prevede il richiamo a due css. Al momento la cosa di qui sopra mi interessa solo per uno dei due. Se in futuro volessi farlo, posso anche per il secondo css inserire dei richiami per browers diversi?

[Prill]

no, non puoi aggiungere i commenti condizionali per indicare altri browser, i commenti condizionali sono riconosciuti dal solo Explorer. Se devi offrire css diversi per i differenti browser sarà necessario usare uno script che identifichi il browser e in base a quello faccia caricare un foglio di stile diverso. Ma la domanda, e la perplessità era anche inizialmente, è: perché css specifici per ogni browser? Una pagina ben costruita e aderente agli standard non può presentare differenze di visualizzazioni da giustificare tanti css

[Diddl2]

Hai senza dubbio ragione... ma l'avevo detto all'inizio che non sono brava! Ho costruito il mio sito modificando una photogallery che ho trovato già fatta, leggendo qua e là come fare. Per me va bene così, sono consapevole di non essere in grado di fare tanto meglio.

Comunque credo di aver risolto Ho fatto varie prove ed ho visto che Explorer 10, Firefox e Google Chrome vedono il mio sito tutti allo stesso modo. La differenza è per Explorer 8 (e precedenti) e riguarda un solo valore, quello della posizione top che dicevo all'inizio, il resto è visto uguale. Quindi mi basta impostare il css principale su Explorer 10, inserire questo ed è fatta:

Dalle mie prove sembra funzionare. Mi resta solo da vedere il comportameto di Explorer 9, se è come 8 o come 10... dubito diverso da entrambi.

Grazie ancora per il tuo aiuto, è stato preziosissimo!