[css]: firefox vs IE

[Whitecrowsrain]

Salve a tutti
il mio problema è questo:

IE ed Firefox interpretano diversamente i CSS...

e questo si sapeva...


ora più in specifico il problema è che ho un div :

#content{
	
        margin-left: 140px;
	margin-right: 180px;
	margin-top: 10px;
	margin-bottom:10px; 
	padding: 1em;
	height: 30em;
	border: 1px solid #0042c2;
	background-image: url("immagini/news1.jpg");
	background-repeat: repeat;
	overflow: visible;
	}

allora i problemi riscontrati sono i seguenti:

1) gli ho data un altezza di partenza ma se lo riempio di testo oltre i limiti succede questo:

a) con IE si espande il div in questione (allungando la pagina) ed il testo rimane dentro il div stesso (soluzione perfetta!!!)

b) con il panda rosso(firefox) invece il div non si espande, e il testo va fuori dal div!!!(non è carino..ma manco per niente!!)

P.S. lo so che la soluzione al tutto potrebbe essere overflow :auto
ma la cosa non mi piace tantissimo quindi cerco un'altra soluzione...

2) Diversa interpretazione di questo attributo:

margin-top : 10px;

a) da IE non viene nemmeno visto!!
b) firefox mette il div 10 px sotto al primo elemento al quale lo ho inserito (come voglio io)

suggerimenti per risolvere questi piccoli ma fastidiosi problemucci?

[jepers]

Per il margin non ho idea, ma per l'altezza prova impostando
height:auto!important;cosi anche con FF ti si adatta.

Inoltre dovresti usare le stesse unità di misura all'interno dello stesso contesto, in questo caso o tutti em o tutti px.

[haZe]

problema #1) IE potrebbe sembrare il migliore ma è lui che sta interpretando male :maLOL:

IE interpreta height come un min-height. Come fare? Ecco una delle mille soluzioni:

* html #content { height: 30em; }
#content { min-height: 30em; }

FF (e tutti gli altri browser standard) non leggono * html {} perchè non c'è nessun elemnto sopra a html, per "fortuna" IE capisce male

Successivamente imposti il min-height che IE non capisce.

Dimmi se funziona

[Whitecrowsrain]

@haze
funziona alla grande...

dove lo hai imparato questo trucchetto???

Grazie!! ora mi legge bene anche la distanza!

@jepers

height:auto!important;
che comando è?

[jepers]

height:auto!important;

Tu dici al browser di leggere prima il comando a cui hai aggiunto !important , in questo caso height:auto, cosi lui da la priorità a questo ed ignora il resto.

IE che fa schifo, non supporta !important e quindi lo ignora. Questo è utile tutte le volte che devi fare un semplice hack per IE, crei lo stesso comando con 2 valori differenti.
Ad uno dai !important(per i browser standard) all'altro un altro valore senza !important che lo legge solo IE.

Io lo suo per i margini o per le dimensioni, non specificate in px, in quanto IE tende a fare tutto più grande...e cosi risolvo.

[Whitecrowsrain]

ottimo...sono tutti e due due ottime chicche..
graze


ma dove le imparate ste chicche?

[floyd46]

ciao a tutti,
scusate se mi inserisco in questa discussione;
ho seguito i 3d postati e quello aperto da Whitecrowsrain.

Effettivamente, come ti ha scritto l'amico haZe e come è stato + volte scritto qui nel forum, IE interpreta male alcune cose rispetto ai browser standard
(magari fossero alcune cose soltanto!!).

Siccome non ho avuto la possibilità di provare lo star hack che ha scritto haZe, credo che la cosa
si potrebbe risolvere scrivendo in questo modo:

#content{
----------
min-height:30em;
height:auto!important;
height:30em;
-----------
}

oppure è una seconda soluzione?
Ad essere sincero non mi è mai capitato di implementare
* html #NomeDiv; in un foglio di stile;
ho sempre usato il codice che ho postato + su.

grazie
saluti

[jepers]

Ciao Floyd, credo che la tua soluzione sia la migliore perchè più compatta

Per Whitecrowsrain, io le ho imparate leggendo le guide di html.it sui css e leggendo le reference di
w3c school

Ciao

[haZe]

Rieccomi

La mia "tecnica" è valida come quella di jepers, anzi la sua è migliore perchè più compatta

E' più compatta ma è, in alcuni sensi, meno versatile della mia: * html #quelchemipare lo legge IE e soltanto IE. Alcuni browser (adesso non ti so dire quali) non capiscono !important ma avrebbero capito bene l'istruzione che c'era prima. In pratica li obblighi a leggere una istruzione che per loro crea un pasticcio.

Insomma dipende da cosa devi fare

[activ]

"Le persone che realizzano layout con tabelle annidate, spacer gif o che ignorano l'accessibilità non possono più definirsi professionisti."
Andy Clarke

questo si che è un bel detto

però raga il problema si risolve se l'altezza è fissa, ma se cambia con il cambiare del testo?