Ok su tutti i browser, IE6 un disastro! come fare

**Mr. Jackson III** · 14-02-2008, 14:32

Ciao a tutti,
ho appena ultimato il mio sito cercando di fare quadrare le cose su Ie7 e Mozzilla (avendo Vista nn ho mai testato su IE6 ahimè). Lo testo ora su un portatile con XP e...disastro!

Cosi è come dovrebbe venire la pagina:

IE7

Questo è invece quello che succede con IE6

IE6

Penso sia dovuto al fatto che ie6 entra in quirks mode a causa della prima riga

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Se la elimino la situazione migliore, almeno compaiono header e footer ma sorgono poi altri problemi di formattazione, anche con i browser con qui invece andava tutto.

Poi stranamente questo non succede nella home, ho pensato che fosse perchè si tratta di una pagina asp, così ho provato a rinominare le altre pagine html in file .asp ma la situazione non cambia.

non so che pesci pigliare sono confuso e devo pubblicare sto sito! Forse la situazione più semplice anche se non la più valida sarebbe scrivere un altro css solo per IE6..non so, please aiuto!

Qui il CSS

codice:

html,body{margin: 0;padding:0;height:100%}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center; background-image:url(images/backroundabcar.png); background-attachment:fixed}
a:link, a:active {color: #E6E6E6}
a:visited {color: #E6E6E6}
a:hover {color:#990000}

div#container{
      width: 960px; 
	  margin: 0 auto;
      text-align: left;
	  background-color:#666;
	  background-image:url(images/sfondo_contenuto.gif);
	  overflow:auto;
	  text-decoration:none;
	  height: 100%;
	  }
	   

body>div#container {height:auto;min-height:100%}


div#header{
    position: fixed !important;
	position:absolute;
	overflow:hidden;
	top:0;
	left: 0;
	width: 100%;
	height: 195px;
    }
  
div#header div {
    margin: 0 auto;
	height: 140px;
	color: #666;
	text-align: center;
	width: 960px;
	clear:both;
    background-image: url(images/testata.jpg);
	background-repeat:no-repeat;
	}
	
	
div#loghibar {
     width: 960px;
	 height: 30px;
	 text-align:center;
	 bottom: 0;
	 }
	 
div#contenuto{
	height: 100%;
	float:left;
	text-align:justify;
	padding:20px;
	padding-left:30px;
	padding-right:30px;
	width: 900px;
	padding-top: 210px;
}	

div#box1 {
     width: 415px;
	 float:left;
     padding-top: 0;
	 padding-bottom: 0;
	 text-decoration:none;
	 
	 }
div#box2 {
     width: 415px;
	 float: right;
	 padding-top: 0px;
	 border-left: 1px solid #999;	 
	 padding-left: 35px;
	 }
	 
div#boxunico {
     width: 100%;
	 float:left;
     padding-top: 0;
	 }
	 
div#footer{
    position: fixed !important;
	position:absolute;
	bottom:0;
	left: 0;
	width: 100%;
	height: 28px;
     }
  
div#footer div, div#footer div a:link {
    margin: 0 auto;
	height: 23px;
	color: #666;
	padding-top: 8px;
	text-align: center;
	width: 960px;
	clear:both;
	background-color:#333333;
	text-decoration:none;
	font: 10px Verdana,sans-serif;
	}

**fcaldera** · 14-02-2008, 15:57

dal codice sorgente della pagina vedo che hai messo l'header quasi alla fine mentre nel flusso del documento dovrebbe trovarsi in cima. Così facendo hai dovuto posizionare l'header con position: fixed che non è supportato da IE6

Inoltre dovresti evitare di mischiare tabelle per impaginare la grafica insieme ai blocchi div generici...

prova quindi a ristrutturare la pagina
1) con un doctype xhtml 1.0 strict
2) iniziando a definire i blocchi di contenuto nell'ordine logico
3) evitando di usare tabelle

**fre2004** · 14-02-2008, 17:41

ti do un consiglio,

usa questo sito per testare il sito su ie6,

fa degli screenshot dels sito.

**Mr. Jackson III** · 18-02-2008, 20:14

Originariamente inviato da fcaldera
dal codice sorgente della pagina vedo che hai messo l'header quasi alla fine mentre nel flusso del documento dovrebbe trovarsi in cima. Così facendo hai dovuto posizionare l'header con position: fixed che non è supportato da IE6

Inoltre dovresti evitare di mischiare tabelle per impaginare la grafica insieme ai blocchi div generici...

prova quindi a ristrutturare la pagina
1) con un doctype xhtml 1.0 strict
2) iniziando a definire i blocchi di contenuto nell'ordine logico
3) evitando di usare tabelle

Hai ragone nn ho seguito l'ordine logico perchè credevo non fosse rilevante, avendo preso spunto da un esempio proprio qui su html.it per fissare l'header e il footer. (con ie7 e firefox infatti funziona proprio come dovrebbe essere cioè se il contenuto è piu lungo della finestra scorre solo l'interno)

Ok cmq grazie mille ora provo esattamente a fare come dici, non sapevo che non supportasse l'attributo fixed. Però c'è una cosa che non mi riesco a spiegare allora, perchè invece sulla home l'header e il footer (anche se con qualche errore) compaiono??

Home

Pagina interna

La tabella invece credo di averla usata solo per i contatti, che ho pensato essendo dati tabellari, andasse bene così.

ciao grazie ancora x l'aiuto

**fcaldera** · 18-02-2008, 20:27

Originariamente inviato da Mr. Jackson III
... non sapevo che non supportasse l'attributo fixed. Però c'è una cosa che non mi riesco a spiegare allora, perchè invece sulla home l'header e il footer (anche se con qualche errore) compaiono??

position : fixed serve a rendere fermo un elemento anche se l'utente scrolla la pagina.

IE6 non lo supporta nel senso che semplicemente non fissa l'elemento, ma lo visualizza esattamente come tutti gli altri elementi.

**Mr. Jackson III** · 18-02-2008, 20:42

Ok ho capito, ma la domanda è: perchè sulle altre pagine proprio non compaiono, mentre sulla home si, quando sia la struttura dell'html che il css sono gli stessi?

è questo che mi confonde non so da dove cominciare per sistemare le cose su IE6, senza però rovinare ff dove si vede tutto giusto!

Inoltre riguardando il mio css (non mi ricordavo bene che ce l'ho fermo da un mese), ho visto che avevo messo l'attributo !important apposta x ie7 e ff, seguito da un position:absolute apposta per gli altri browser, ma nn pare funzionare cmq.

**gengix** · 18-02-2008, 21:26

position : fixed è supportata da IE5 / IE5.5/ e IE6 solo se viene attribuita all'elemento body.

Discussione: Ok su tutti i browser, IE6 un disastro! come fare

Strumenti discussione

Ricerca discussione

Visualizza

Ok su tutti i browser, IE6 un disastro! come fare

Permessi di invio