colore sfondo delle celle invisibile in Netscape

[elastico]

Ciao,
ho realizzato una tabella in cui alcune celle hanno lo sfondo colorato, l'ho fatto impostando
th{
width: 4px;
background-color: #C7E318;
}
nel file .css.

Al browser compatibility check Dreamweaver non mi da' errori, e infatti in IE funziona, ma sia in Netscape 7 che in Firefox 1.5 le celle colorate appaiono bianche.
Non riesco a capire perche'...qualcuno mi sa aiutare?

Grazie,
Guido

[Mich_]

Nella larghezza della cella (4px) ci vedo un grave errore semantico: le celle sono fatte per metterci qualcosa, non per creare dei bordi. I bordi si rendono con border, margin o padding (a seconda delle circostanze).

Magari la cella e` anche vuota, con il che` il browser e` autorizzato a non prenderla in considerazione.

[elastico]

Effettivamente sono celle vuote.
Come si vede nell'allegato, mi serve avere una barretta colorata prima della voce del menu e per alleggerire la pagina non volevo usare un'immagine.

La tua risposta comunque mi ha fatto capire dov'era l'errore: l'impostazione della tabella nel file .css conteneva anche
empty-cells:hide
Evidentemente IE lo ignorava, ma Netscape e FF no. L'ho tolto e ora funziona.

Venendo all'errore semantico, in che altro modo potrei ottenere quello che si vede nell'allegato?

Grazie,
Guido

[Mich_]

Come quasi sempre i menu, quella e` una lista (con titolo iniziale). Quindi si rende con i tag <ul> e[*]. Il titolo con il tag <hN> (<h> in XHTML2).

A sinsitra delle scritte c'e` un bordo colorato (bianco nel titolo).
Il tutto con un certo margine sinistro.
Chiaramente dal[*] devi togliere il list-style-type (metterlo a none) ed eliminare il padding sinistro.

[elastico]

I css mi piacciono sempre di piu'!
Seguendo il tutorial di:
http://www.alistapart.com/stories/taminglists/
son riuscito a replicare quel menu fatto con tabelle usando le liste.

Ma ho dei problemi di allineamento:
Ci sono 3 div nella banda verde con le 3 voci menu principali, e 3 div nella banda grigia con i sotto-menu

Come si vede nell'allegato, in IE (screenshot in alto) tutto e' allineato, mentre in Netscape (in basso) c'e' uno scarto di alcuni pixel.
Modificando il margin-left li allineto in Netscape ma non piu' in IE.

Dove sto sbagliando?

Grazie,
Guido

[Mich_]

Non posti i codici (HTML e CSS), per cui devo tirare ad indovinare.

Probabilmente si tratta del diverso box model di IE rispetto agli altri browser
http://css.html.it/articoli/leggi/34...l-box-model/1/ --> specie pag. 4 (pero` l'hack sarebbe da fare con i commenti condizionali, non come e` proposto)
http://www.w3.org/TR/REC-CSS2/box.html

[elastico]

Secondo quanto leggo sulle pagine pero' IE6 dovrebbe comportarsi come Netscape 7.
Questo problema invece ce l'ho proprio con IE6.

Questa e' l parte di css relativa al menu:

div#button {
width: 288px;
padding: 0;
margin: 0;
clear: none;
float: left;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
margin-left: 120px;
}

#button li {
margin: 0;
}

#button li a {
display: block;
padding: 3px 2px 2px 5px;
border-left: 5px solid #C7E318;
color: #000000;
text-decoration: none;
width: 100%;
}

Se imposto width:290 si allinea in Netscape, con 288 si allinea in IE.
E' mezza giornata che vario margin e padding, non so piu' cosa provare!

Grazie,
Guido

[Mich_]

Se vuoi che IE interpreti il box model come i browser standard, devi usare XHTML Strict.
Altrimenti IE ha un box model diverso: la larghezza totale di un blocco vale:
- in standard: margin+border+padding+width+padding+border+margin
- in IE: margin+width+margin (width comprende border e padding)

Se puoi evitare di usare padding e border (in qualche caso si puo` sostituire con i margin), risolvi facilmente.
Altrimenti:

<style ...>
CSS standard
</style>
<!--[if IE]><style ...>
CSS correzioni per IE
</style><![endif]-->