[CSS CrossBrowser] Il solito problema: ok con Firefox 2 ma non con Ie !

[realtebo]

potreste aiutarmi con un problema CSS?

Sto cercando di realizzare una impaginazione tipo quotidiano:
- una colonna larga il 20% alta come tutto lo schermo a sinistra che contiene
una fila di link e basta
- la parte destra inizia con una sezione larga il 100% del rimanente, cioè
l'80% tot dello schermo intero che contiene due news in evidenza e alta
un tot fisso (misurati in em, invece che in px per essere sicuro del comportamento anche alle altre risoluzioni)
- il resto dello schermo è un unico riquadro contenente 9 box identici, su tre righe e tre colonne, di larghezza e altezza fisse e identiche.

Ci sono riuscito con Firefox 2, allego di seguito il CSS, ma NON si vede proprio bene con IE, che a quanto pare non rispetta ne 'height' ne 'min-height' e ignora anche l' " !important"

Help ..



DIV.firstTwo {
float: right;
width: 80%;
text-align: center;
border-bottom: 1px solid black;
}

DIV.firstTwoItem {
font-size: 1.1em;
float: left;
width: 47%;
min-height: 11em;
text-align: justify;
margin: 5px;
padding: 5px;
background-color: white;

}

DIV.otherNine{
float: right;
width: 80%;
text-align: center;
}

DIV.otherNineItem {
font-size: 1.0em;
float: left;
width: 30% !important;
height: 12em !important;
text-align: justify;
margin: 4px;
padding: 7px;
background-color: white;
color: gray;
}

DIV.list {
float: left;
width: 19%;
text-align: left;
border-right: 1px solid black;
padding: 5px;
}

DIV.listItem {
font-size: 0.9em;
float: left;
width: 100%;
text-align: left;
margin: 0 0 14px 0;
}

[Alhazred]

Purtroppo FF ed IE hanno un diverso modo di fare il rendering della pagina. Attualmente sono alle prese con una web application e sono alla fase della resa grafica lavorando con CSS.
La cosa che posso dirti subito è che, stando a quanto ho letto sul web, IE non supporta min-height.
Una cosa che ho notato è che se hai una tabella di questo tipo

<table>
<tr>
<td>testo</td>
</tr>
<tr>
<td><input type="submit" ...></td>
</tr>
<tr>
<td>testo</td>
</tr>
</table>

Su FF avrai una spaziatura uguale sopra e sotto il pulsante submit, su IE invece sotto avrai più spazio, come se ci mettesse un <br> che in realtà non c'è.
Insomma, tante volte devi raggiungere un compromesso, non si può sempre avere una perfetta corrispondenza su tutti i browser... purtroppo.

[realtebo]

grazie per avermi risposto, però forse non hai notato che io NON uso le tabelle.

La mia domanda precisa era: dovendo fare dei riquadri con DIV tutti alti uguali, con IE e CSS 2 come lo ottengo !?

[Alhazred]

Si si, lo so che non usi tabelle, era per farti un esempio del fatto che IE e FF interpretano cose uguali in modo diverso.

[realtebo]

perdonami, anche io ho capito te.

ma la mia domanda rimane: come ottengo tre cose alte uguali in Ie?

[RNicoletto]

Studiare ed imparare a memoria: How to get Cross Browser Compatibility Every Time (http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/) (Y)