Problemi con il box model

[Many17]

Che angoscia!
Sto sistemando il solito sito www.marcofaggioli.it, ho seguito tanti consigli (grazie a Michele, ho risolto anche la sezione fotografie con i relativi rollover in JS ) ma come al solito vado a testarlo con IE 5.5 e la larghezza di alcuni DIV è diversa da come si vede in browser recenti.
Devo seguire le regole del box model di Explorer per caso?
Beh, ci ho già provato e sicuramente sbaglio qualcosa perchè non accade nulla.
Ad ex ho in xhtml:
<div id="orologio"></div>
e il relativo CSS:
#orologio{
border-left: 1px solid black;
border-right: 1px solid black;
height: 15px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
text-align:left;
background-color: #300;
color: #c90;
border-bottom: 1px solid #960;
font:10px verdana,helvetica,sans-serif;
padding-left: 33px;
width: 762px; /* valore per IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
width:727px; /* valore per gli altri browser */
}
html>body #orologio { /* "be nice to Opera 5" !! non lasciare spazi prima o dopo '>' !! */
}

Se guardate in IE 6 la sezione dove c'è la data corrente è ok, in IE 5.5 la sezione è più stretta di parecchi px!


Qual'è il problema?
Manila

[Mich_]

Il problema e` nei browser IE , che piano piano si vanno ad adeguare agli standard W3C.

IE5.0 aveva molti punti di discordanza; IE5.5 ha ancora varie cose che non seguono gli standard, mentre IE6 e` molto piu` vicino.
Il fatto e` che Microsoft vuole essere compatibile all'indietro e quindi fatica ad adeguarsi, mentre Netscape con la versione 6 ha fatto un salto di qualita` (e uno strappo con il passato).

Ciao
Michele

[Many17]

Ciao Michele, quindi con la regola di Tantek non si risolve niente... non capisco se sbaglio io nell'applicare la regola oppure non c'è proprio soluzione.

[Mich_]

Ho guardato ora il tuo codice (prima avevo risposto inmaniera generica) e scopro che usi misure assolute (px).
Questo ti dara` sempre problemi con i vari browser, datro che non puoi conoscere le dimensioni dei caratteri.

Io proverei ad usare le dimensioni in em (dimensioni della lettera M maiuscola), che dovrebbero essere adattate alle dimensioni del carattere usato da quel particolare browser.

Anche i colori dati con tre cifre (che e` specifica del W3C) non mi pare venga seguita dai browser, epr cui io la eviterei.

Ciao
Michele

[Many17]

Avevo già provato quella soluzione, ma non è proprio così.
Il problema sta proprio nel box model (vedi l'articolo di Constile http://www.constile.org/tutorial/IE5_box_model) quando si imposta una larghezza di tot px.

[pacovox]

Prova così:

#orologio{
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid #960;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0px;
text-align:left;
background-color: #300;
color: #c90;
font:10px verdana,helvetica,sans-serif;
padding-left: 33px;
width: 762px;
height: 16px;
voice-family: "\"}\"";
voice-family: inherit;
width:727px;
height: 15px;
}
html>body #orologio {
width:727px;
height: 15px;
}

[Many17]

Ciao Pacovox, la soluzione che mi hai dato è praticamente identica alla mia infatti il risultato è lo stesso e la parte contenente la data (etichettata da me #orologio) risulta più stretta. Il problema penso che sia nel css quando do un valore al padding sinistro: 0px 0px 0px 33px;
Non so come fare!

[pacovox]

Non ho sottomano Ie5, hai provato con:
padding: 0 0 0 33px;

Io definisco sempre "height" e "width" in "html>body #orologio", alcune volte mi ha risolto problemi anche con browser diversi da Opera, pensavo fosse questo il tuo problema visto che non lo avevi inserito.

[Many17]

Magari Pacovox, grazie lo stesso ma purtroppo il problema non è quello.
Sicuramente esiste una soluzione, aspetterò che mi venga un lampo di genio, e se viene a voi fatemi sapere!
Manila

[pacovox]

Nel tuo css non hai messo:

html>body #orologio {
width: 727px;
height: 16px;
}

Se usi un border-bottom di 1px devi definire anche l'altezza del box a 16px.

Scusa se insisto ma mi sembra impossibile che non funzioni.
Ciao