Incompatibilità I.E. ed altri browsers

**mld** · 16-06-2008, 14:51

Ho questo codice html:

...
<link href="fogliostile.css" rel="stylesheet" type="text/css">
<body class="bordercolor">
<DIV id="intestazione">
<table>
<tr><td class="colorecelle">
Pagina1</td>
</tr></table>
</DIV>
....

e questo foglio "fogliostile.css":

.bordercolor { background-image: url("xxx.jpg"); }
.colorecelle a { background-color: #000000; display:block; }
.colorecelle a:link { background-color: #000000; }
.colorecelle a:visited { background-color: #000000; }
.colorecelle a:active { background-color: #000000; }
.colorecelle a:hover { background-color: #0000ff; }
#intestazione { OVERFLOW: hidden; TOP: 8px; POSITION: absolute; LEFT: 5px; WIDTH: 520px; HEIGHT: 80px; Z-INDEX: 1; }

Con I.E. tutto ok. Con altri browser (Mozilla, Netscape, Opera...):
- NON visualizza i "div";
- NOn visualizza le cellette colorate del <table> né l'effetto del passaggio del mouse

Come posso fare?
Grazie.

**Mich_** · 16-06-2008, 15:56

Quale DTD?

In linea di massima dovresti curare meglio la sintassi: in qualche caso il tag <DIV> non esiste, dato che i tag vanno scritti minuscoli.

Inoltre nel CSS, ti mancano le dimensioni del tag <a>, che potrebbe essere piu` piccolo del blocco in cui e` contenuto:

codice:

.colorecelle a { 
  background-color: #000;
  display:block;
  width: 100%;
  height: 100%;
}

E attenzione all'ordine: le pseudoclassi devono essere inserite secondo l'ordine: :link, :visited, :hover, :active http://www.w3schools.com/css/css_pseudo_classes.asp

PS: quando posti codice, usa sempre gli appositi tag VB (ad es. il bottone # sopra l'area di inserimento), altrimenti diventiamo pazzi ad interpretare.

**mld** · 16-06-2008, 16:35

Ho fatto queste correzioni (in rosso) nel codice html...

codice:

<link href="fogliostile.css" rel="stylesheet" type="text/css">
<body class="bordercolor">
<div id="intestazione">
<table>
<tr><td class="colorecelle">
Pagina1</td>
</tr></table>
</div>

e nel foglio css...:

codice:

.bordercolor { background-image: url("xxx.jpg"); }
.colorecelle a { background-color: #000000; display:block; width: 100%;  height: 100%;  }
.colorecelle a:link { background-color: #000000; width: 100%;  height: 100%;  }
.colorecelle a:visited { background-color: #000000; width: 100%;  height: 100%;  }
.colorecelle a:hover { background-color: #0000ff; width: 100%;  height: 100%;  }
.colorecelle a:active { background-color: #000000; width: 100%;  height: 100%;  }
#intestazione { overflow: hidden; top: 8px; position: absolute; left: 5px; width: 520px; height: 80px; z-index: 1; }

ma non è cambiato assolutamente niente (ossia: tutto ok per I.E. ma niente da fare per gli altri)...

**Mich_** · 16-06-2008, 17:19

Ti avevo chiesto anche la DTD (che viene specificata dal <!DOCTYPE...>). Quella puo` dare effetti diversi nei vari browser.

Comunque stai programmando con un po' di disordine: vedi questa riformulazione del codice HTML:

codice:

<body class="bordercolor">
  <div id="intestazione">
    <table>
      <tr>
        <td class="colorecelle">
          Pagina1
        </td>
      </tr>
    </table>
  </div>
qui manca il </body>

L'ordine non serve ai computer, ma serve a noi umani per destreggarci in un mondo che non e` il nostro.

Restano ancora dei dubbi sull'uso improprio della tabella (non vedo dati tabellari, quindi l'uso e` semanticamente sbagliato).
E non capisco perche` usi un posizionamento assoluto, che in linea di massima e` piuttosto difficile da gestire (occorre conoscere molto bene i CSS per poterlo utilizzare).
E perche` hai inserito le dimensioni nelle pseudoclassi? Se le cose non cambiano non serve ridefinirle nelle varie pseudoclassi: la definizione in a e` sufficiente.

Dopodiche` non ci sono sintassi in quel codice che potrebbero essere interpretate in modo diverso dai browser standard: comunque ti consiglio di passare dai validatori , prima quello HTML, poi quello CSS: magari c'e` un problema di sintassi che mi sfugge.

**mld** · 16-06-2008, 17:32

Per semplicità avevo riportato solo frammenti di codice...quelli che pensavo avessero bisogno di essere cambiati...comunque adesso funziona tutto poiché il foglio di stile non conteneva molte altre informazioni che avevo scritto alcune volte in maiuscolo e altre volte non avevo messo il punto e virgola alla fine. Ho provveduto a modificare tutto e ora funziona perfettamente anche con gli altri browsers...

Non ho ben capito perché mi consigli di non usare il posizionamento assoluto...prima di dichiararli con i css utilizzavo semplicemente la stessa cosa con i div tipo questo:

<DIV style="OVERFLOW: hidden; TOP: 8px; POSITION: absolute; LEFT: 5px; WIDTH: 240px; HEIGHT: 80px; Z-INDEX: 1">

e non mi sono mai trovato male né ho avuto mai problemi....

**Mich_** · 16-06-2008, 18:05

Non ho ben capito perché mi consigli di non usare il posizionamento assoluto...

Perche` si comporta male in alcune condizioni: prova ad esempio ad ingrandire il carattere: in FF (o altro browser non-IE) prova a premere control-+
Non riesci con i posizionamenti assoluti a adattarti alle opzioni di visualizzazione dei singoli browser.

Discussione: Incompatibilità I.E. ed altri browsers

Strumenti discussione

Ricerca discussione

Visualizza

Incompatibilità I.E. ed altri browsers

Permessi di invio