Maledetti Float con IE6 vs Firefox

**tritolo86** · 27-03-2007, 00:44

Allora, in breve, per creare l'header di un sito, ho scomposto un'immaigne abbastanza grande in più parti e ho creato dei DIV che hanno come sfondo queste immagini così che non possano essere salvate facendo click col tasto destro.

Cosa succede? Semplice Firefox visualizza tutti i div correttamente allineati e combacianti.
IE6, se ne fotte e mi visualizza i DIV a scacchiera, cioè:
(i cancelletti sono i DIV con il background)

codice:

######
            ########
######
           ########

ho provato a settare margini, seguire vari tipi di floating, mettendo il box principale anche come float e width 100% ma niente... cioè se ne frega altamente...

AIUTOOOOOO!!

giusto per chiarezza uso:

codice:

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

Ecco il codice CSS:

codice:

#h_top {
background:url(structure/sheet_top.jpg);
width:778px;
height:21px;
padding:0px;
margin:0px;
border:none;
}

#h_tl {
background:url(structure/head_tl.gif);
width:448px;
height:56px;
padding:0px;
margin:0px auto;
border:none;
float:left;
display:inline;
}

#h_tr {
background:url(structure/head_tr.gif);
width:330px;
height:56px;
padding:0px;
margin:0px auto;
margin-left:448px;
border:none;
}

#h_bl {
background:url(structure/head_bl.gif);
width:180px;
height:45px;
padding:0px;
margin:0px auto;
border:none;
float:left;
}

#h_br {
background:url(structure/head_br.gif);
width:598px;
height:45px;
padding:0px;
margin:0px auto;
margin-left:180px;
border:none;
/*position:relative;*/
}

ecco il codice html

codice:

<div id="header"><div id="h_top"></div><div id="h_tl">[img]structure/spacer.gif[/img]</div><div id="h_tr"></div><div id="h_bl"></div><div id="h_br"><div style="clear:right;"></div></div>
  </div>

**Mich_** · 27-03-2007, 09:12

Io vedo due tipi di problemi: nell'HTML e nel CSS.

HTML:
I blocchi vuoti possono venir ignorati dai browser, compreso il CSS: alcune versioni dei browser che ci sono in giro in effetti li ignorano: metti sempre almeno un carattere bianco dentro il div.

CSS:
Ti manca il float in alcuni blocchi, la gestione dei margini non e` corretta e in vari casi ridefinisci i margini.

1. I blocchi a destra devono anche avere il float:left.

2. I margini dei blocchi a sinistra non devono essere lasciati automatici: probabilmente nel tuo caso vanno messi sempre a zero;

3. Quando scrivi:
margin:0px auto;
margin-left:448px;
puoi sostituire con:
margin: 0 auto 0 448px;

Proabilmente dovrai anche inserire il tutto dentro un blocco che contenga tutto, immagino con larghezza 778px e senza bordi e padding (invece potrebbe avere margini laterali automatici, se vuoi centrare il blocco completo).

**tritolo86** · 27-03-2007, 17:47

Grazie Mich!

Ho poi risolto stamattina (non avevo letto il tuo post e non avevo internet).

Si, comunque gli errori che mi hai segnalato c'erano e me ne sono accorto stamane.
Tutto ha funzionato quando:

Ho messo i Float Left su tutti i div.
Ho messo sui Div di sinistra il Display:Inline
Ho messo i margini a 0px e basta.

Quello che non mi spiego è la necessità di INLINE...

comunque ora funziona tutto.

Quel fatto degli spazi nei DIV me lo ero scordato ma anni fa ci combattevo parecchio...
Vado subito a rimediare!

Grazie ancora!

Ciao

**Mich_** · 27-03-2007, 17:52

L'inline e` inutile.
Anche perche` un float e` sempre di tipo block.

Pero` ...
Se metti inline su certi blocchi IE6 non raddoppia i margini.

Quindi piu` che inutile, e` pleonastico: non serve ma fa contento un browser.
(se ne e` gia` parlato nel forum).

Discussione: Maledetti Float con IE6 vs Firefox

Strumenti discussione

Ricerca discussione

Visualizza

Maledetti Float con IE6 vs Firefox

Grazie 1000

Permessi di invio