[CSS] Bene in IE male in Opera&FireFox

[PolecatIV]

Vi posto il link in questione ed ho un problema:
in InternetExplorer si vede benissimo, ma in Opera o Firefox da problemi di layout, esempio che salta subito all'occhio è che il contenitore principale non tiene conto della roba dentro di esso e si ridimensiona quasi tutto verso l'alto, come mai?

Grazie a tutti

[PolecatIV]

Ops mi sono dimenticato il LINK

visto che ci sono posto anche il css:

body {
  text-align:center;
  font-family: Georgia, Serif;
  background: #FFFCD7
}

#frame {
  width:750px;
  margin-top:1px;
  text-align:left;
  border: 1px solid #000000;
  background: #FFFFFF
}

#top {
  width: 695px;
  padding: 10px;
  margin: 10px;
  text-align: center
}

#main {
  float: left;
  width: 500px;
  background: #FFFFFF;
  padding: 2px;
  margin:5px;
  margin-left: 15px;
  border: #000000
}

#rightcontent {
  float: right;
  width: 140px;
  background: #FFF2F2;
  border: 1px solid #CCCCCC;
  padding: 10px;
  margin: 5px;
}

[seed_squall_it]

Mi dispiace dirtelo, ma è IE che sbaglia facendoti vedere la pagina "bene".

Ci sono alcuni "errori di fondo" nel codice. Prima di tutto, ricordati che i box flottanti sono estratti dal normale flusso del documento e quindi non condizionano la disposizione dei box posizionati normalmente (in modo statico). In particolare, se un box contiene solo box flottanti e non ha altezza assegnata esplicitamente, tale box ha altezza nulla. Nel tuo caso, il box "frame" contiene un solo box posizionato staticamente che è "top". La sua altezza (che non è assegnata con height) è data perciò dall'altezza dell'unico box statico che contiene, ovvero "top". Ci sono 2 modi per ovviare all'inconveniente.

1. Rendi flottante anche il box "frame" (con float: left ad es.).

2. Migliore della precedente, aggiungi un tag vuoto (un
ad es.) subito prima di chiudere il box "frame". A questo tag assegni una classe (chiamiamola clear) con questa regola di stile:

br.clear {
clear: both;
}

Questo tag quindi "ripulisce" entrambi gli allineamenti a destra e a sinistra dei due box flottanti e lo fa all'interno del box "frame", ripristinando il normale flusso del documento. Questo fa in modo che, essendo il flusso ripristinato dentro il box "frame", la sua altezza sia influenzata da quella dei due elementi flottanti al suo interno. Inoltre, usando questa tecnica, risolvi un bug di Netscape 6 con i contenitori dei box flottanti.

Poi ho notato una cosa "pericolosa": nei due box flottanti, hai assegnato dei margini sullo stesso lato del float (margin-left e float: left in "main" e margin: 5px e float: right in "rightcontent"). IE soffre di u bug che raddoppia il margine impostato sullo stesso lato del float, quindi cerca di non impostare mai il margine corrispondente al lato del float di un box (o al limite, impostalo a 0).

Ricordati anche del box model errato di IE5...se imposti un box con larghezza 500px e padding di 2px, il box non sarà largo 504px (come dovrebbe) ma sempre 500px, riducendo la larghezza effettiva dei contenuti a 496px. Questo ovviamente solo su IE5 (e su IE6 quando lavora in quirks mode).

IE, che ovviamente usa "standard" tutti suoi, si comporta molto diversamente da come dovrebbe, ma ricorda sempre che se hai differenze tra una pagina vista in IE e in FF, al 99% è IE che sbaglia.

[PolecatIV]

Grazie mille per la risposta precisissima!!
Ora ho il problema che non ha voglia di centrarmelo e lo sfondo giallino non si vede...

[seed_squall_it]

Per centrarlo, come al solito è IE che sbaglia. Hai usato solo text-align: center nel body, che è il modo scorretto di centrare un box (non per IE ovviamente!). Un box va centrato nel suo contenitore impostando i suoi margini orizzontali sul valore auto. Quindi il tuo box "frame" deve avere la proprietà margin impostata così:

margin: 1px auto 0 auto; /* imposta nell'ordine i margini
superiore, destro, inferiore e sinistro */

per essere centrato nel body con i borwser aderenti agli standard. Per lo sfondo, se usi solo il colore, ti consiglio di impostare esplicitamente la proprietà background-color, anziché la "scorciatoia" background.

PS: ho visto ora che hai scritto l'attributo class del tag
in maiuscolo. Ricordati che l'XHTML ammette solo tag e attributi scritti in minuscolo per essere valido!

[seed_squall_it]

Lo sfondo del body non te lo mostra perché hai usato float: center nella regola del body! Toglilo perché non puoi rendere flottante il body e il valore center non si applica alla proprietà float! Inoltre avevi scritto float: center senza aggiungere il punto e virgola alla fine della dichiarazione precedente (quella del background)! Abituati a mettere sempre il punto e virgola alla fine delle dichiarazioni di stile, anche se una dichiarazione è l'ultima della regola.

[PolecatIV]

Ti ringrazio troppo! Sei stato gentilissimo, ho risolto tutto, il fatto dei punti e virgole, ehm, sai... l'abitudine allo script di 3DStudioMax!

Grazie ancora!

[PolecatIV]

Oraora ho notato una cosa stranissima: sia in Opera che IE i post nel blog vanno a stringersi sempre piu! Se si prova a scorrere veloce i post si nota, ma in FireFox questo non avviene, ho provato anche a rivedere l'asp com'era disposto, ma nulla... sapete a cosa è dovuto?