IE sposta un elemento in posizione non corretta [era:Problema con Internet Explorer]

Salve a tutti, ho un piccolo problema con il sito che sto facendo. Su Firefox funziona tutto alla perfezione, con IE invece mi sballa alcuni elementi.

Ad esempio questa pagina con firefox funziona bene, IE invece mi sposta il form per la prenotazione in basso alla pagina, come mai???

http://kutolenko7.altervista.org/sit...enotazione.php

Grazie!

[saitfainder]

Di solito dipende dal fatto che IE interpreta diversamente l'attributo width del CSS perché include anche il padding e di conseguenza il contenitore risulta più stretto che con gli altri browser e se all'interno ci sono altri elementi a larghezza fissa questi non ci stanno più e uno di questi scivola in basso.

Soluzione: dare qualche pixel in più finché ci sta tutto.

[LastWings]

Oppure, fare un css a parte solo per Internet Explorer, od ancora usare la keyword !important

[saitfainder]

Oppure, fare un css a parte solo per Internet Explorer, od ancora usare la keyword !important

Usare un CSS diverso per browser è una buona soluzione, anche se richiede un minimo di intervento.

Io evito però di usare hack di vario genere, tipo sfruttando l'important o commenti strani, perché alla fine hai un CSS pieno di cose taroccate col rischio che da qualche parte, in futuro, la situazioni peggiori.

Quindi che mi consigliate di fare?

Soluzione: dare qualche pixel in più finché ci sta tutto.

Ma intendi all'elemento width?

Sapete se con la nuova versione di IE da gli stessi problemi?

[saitfainder]

Quindi che mi consigliate di fare?
Ma intendi all'elemento width?

L'attributo width del contenitore.

Sapete se con la nuova versione di IE da gli stessi problemi?

Se intendi IE7 non formatta bene la tua pagina. IE8? Si vedrà...

Ho aumentato la grandezza, adesso il form sale in alto ma è sballato a destra, sapete se si può fare qualcosa per posizionarlo correttamente come su Firefox? Oppure devo usare un css diverso per IE e uno per Firefox?

[saitfainder]

Se hai necessità di posizionamenti molto precisi la soluzione col CSS differenziato è la migliore.

Se hai necessità di posizionamenti molto precisi la soluzione col CSS differenziato è la migliore.

Ma è possibile farla solamente per un elemento? Perché il resto funziona su entrambi i browser.

[saitfainder]

Certo, non per niente sono CASCADE: tu inserisci un CSS globale e poi, se riconosci IE, aggiungi un CSS di correzione che agisce solo sull'elemento da correggere.

Certo, non per niente sono CASCADE: tu inserisci un CSS globale e poi, se riconosci IE, aggiungi un CSS di correzione che agisce solo sull'elemento da correggere.

Non l'ho mai fatto, mi potresti dire come si fa? Serve un javascript?

[saitfainder]

Con javascript ti funziona su tutte le pagine, anche quelle statiche. Dovrebbe essere una cosa del tipo:

<script type="text/javascript">
if (navigator.userAgent.search(/MSIE/)>-1) {
  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", "http://tuosito.altervista.org/ie-patch.css");
}
</script>

Eventualmente si può specificare la versione di IE a cui è dedicata la patch.

Eventualmente si può specificare la versione di IE a cui è dedicata la patch.

Se la lascio come hai scritto tu vale per tutte le versioni?

[funcool]

Sì, dovrebbe valere per tutte le versioni di Internet Explorer.

Ragazzi non mi va, ho usato questo codice solo che sembra non mi legga il css per Explorer:

<script type="text/javascript">
if (navigator.userAgent.search(/MSIE/)>-1) {
  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", "css/indexExplorer.css");
   alert("Stai usando Internet Explorer");
}
</script>

Nel javascript entra perché esce l'alert, ma il css no cambia, come mai?

[saitfainder]

Lo hai pubblicato da qualche parte? Magari dipende da qualcosa di contestuale.

Lo hai pubblicato da qualche parte? Magari dipende da qualcosa di contestuale.

Certo, il sito è su altervista, questa è la pagina;

http://kutolenko7.altervista.org/sit...enotazione.php

[saitfainder]

http://kutolenko7.altervista.org/sit...exExplorer.css è vuoto!

http://kutolenko7.altervista.org/sit...exExplorer.css è vuoto!

Adesso è vuoto, ma se fosse così non dovrebbe apparire la grafica per quella pagina, invece appare lo stesso, come mai?

http://kutolenko7.altervista.org/sit.../css/index.css


Ciao!

http://kutolenko7.altervista.org/sit.../css/index.css


Ciao!

Ehm, non l'ho capita....

E' la risposta alla tua domanda, nel post precedente.


Ciao!

E' la risposta alla tua domanda, nel post precedente.


Ciao!

Ma quindi il javascript non funziona visto che se la pagina viene aperta con Internet Explorer dovrebbe richiamare un altro css....

Non ho seguito questa discussione, ma se richiami un altro css esterno ma che risulta vuoto, non sovrascrivi gli stili che carichi con il file che ti ho linkato.


Ciao!

[saitfainder]

Adesso è vuoto, ma se fosse così non dovrebbe apparire la grafica per quella pagina, invece appare lo stesso, come mai?

Per il funzionamento dei CSS che sono, per così dire, incrementali.

Per annullare una definizione è necessario indicarlo esplicitamente.

Per esempio:
- In un primo CSS (nel tuo caso quello generico) faccio lo sfondo rosso
- Voglio che rimanga bianco solo per Explorer --> allora in un secondo CSS devo mettere una regola che dice esplicitamente di fare lo sfondo bianco. Altrimenti continua a essere valida la prima regola e lo sfondo rimane rosso.

Tutto chiaro?

@debug Ma cosa diavolo volevi dire? [edit] Adesso ho capito...

Quello che hai scritto tu, forse un po' più contorto!


Ciao!

Per il funzionamento dei CSS che sono, per così dire, incrementali.

Per annullare una definizione è necessario indicarlo esplicitamente.

Per esempio:
- In un primo CSS (nel tuo caso quello generico) faccio lo sfondo rosso
- Voglio che rimanga bianco solo per Explorer --> allora in un secondo CSS devo mettere una regola che dice esplicitamente di fare lo sfondo bianco. Altrimenti continua a essere valida la prima regola e lo sfondo rimane rosso.

Tutto chiaro?

@debug Ma cosa diavolo volevi dire?

Ho capito, ma avevo gia provato a sovrascrivere il css con un altro, solo che non funzionava lo stesso, così ho provato a cancellare tutto per vedere se usciva qualcosa....adesso ad esempio ho messo un altro css, solo che non lo sostituisce.

Io vedo sempre gli stessi file...


Ciao!

Io vedo sempre gli stessi file...


Ciao!

Come gli stessi, scusa uno si chiama index.css, l'altro che richiamo si chiama indexExplorer.css, ho provato anche a cambiare sfndo, cancellare immagini ma niente.

Qui richiamo l'altro css..

<script type="text/javascript">
if (navigator.userAgent.search(/MSIE/)>-1) {
  var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", "css/indexExplorer.css");

}
</script>

[saitfainder]

Io vedo sempre gli stessi file...

Debug, se non hai seguito la discussione forse è meglio che ci pensi io che ho seguito dall'inizio...

Comunque ho trovato l'inghippo. Il codice che ti ho incollato era per includere un Javascript e non l'ho modificato per includere un CSS per cui inserisci questo che dovrebbe andare.

<script type="text/javascript">
if (navigator.userAgent.search(/MSIE/)>-1) {
  var fileref=document.createElement('link');
  fileref.setAttribute("type","text/css");
  fileref.setAttribute("src", "css/indexExplorer.css");
}
</script>

Inoltre il secondo CSS dovrebbe essere di "correzione", per cui all'interno dovresti inserire solo lo differenze rispetto al primo. Così è anche più facile da capire su cosa si sta intervenendo.