Larghezza celle vuote in firefox 1.5

[mrsource]

Salve a tutti!
Ho un problema un pò curioso con firefox 1.5...
Ho fatto una tabella a cui ho dato il 100% della larghezza, la dimensione delle colonne è espressa in percentuale e la somma delle stesse è pari al 100%.
Quando in una di queste colonne non vi è del testo firefox le visualizza di 1 o 2 pixel più larghe del dovuto andando a rovinare il layout o a disallinearsi con la cella superiore. Anche se metto &-nbsp; accade lo stessa cosa.
Con IE6 ed Opera è tutto OK!
Che ne pensate?
Esempio:

<table width="100%" class="cavalli" cellSpacing=0 >
<tr class="row1" >
<td  class="codice">556677</td>

<td class="desc" >Cavallo dei pantaloni</td>
<td align="center" class="conf"></td>
</td>
<td align="center" class="conf"></td>
</td>
<td align="center" class="altro"></td>
</td>
<td align="center" class="cartoni"></td>
</td></tr></table>

[Mich_]

A parte che il codice postato ha dei tag doppi, ci sono alcune considerazioni:
1. non hai postato il CSS, per cui non si puo` vedere se ha dei problemi;
2. utilizzi formattazione HTML, che potrebbe andare in contrasto con i CSS.

Se vuoi essere sicuro, devi eliminare tutti i tag di formattazione; meglio sarebbe passare direttamente a XHTML Strict.

[mrsource]

Ho eliminato i tag doppi e quelli di formattazione sull'html :

<table class="cavalli">
<tr class="row1">
<td class="codice">556677</td>
<td class="desc" >Cavallo dei pantaloni
<td class="conf"></td>
<td class="conf"></td>
<td class="altro"></td>
<td class="cartoni"></td>
</tr></table>

Classi CSS:

table.cavalli {
	background-color: #BE4B44;
	margin: 0px;
	padding: 0px;
/*	border: 1px solid #BE4B44;*/
/*	border-spacing: 1px;*/
	width: 100%;
	border-collapse: collapse;
}

table.cavalli td a:link, table.cavalli td a:visited {
	color: #000000;
	text-decoration: none;
	font-size: 13px;
}

table.cavalli td {
	border-bottom: 1px solid #e5e5e5;
	margin: 0px;
	padding 4px;
	height: 15px;
	border-bottom: 0px;
	border-top: 1px solid #BE4B44;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
	text-align: center;
	color: #000;
}

table.cavalli td.details {
	color: #BE4B44;
	margin: 0px;
	padding: 0px;
	border: 0px solid #fff;
	border-spacing: 0px;
	width: 50px;
	border-collapse: collapse;
	color: #BE4B44;
}

table.cavalli #details{
	color: #BE4B44;
	font-size: 10px;
}

table.cavalli td.codice {
	padding: 2px;
	font-size: 12px;
	width:10%;
}

table.cavalli td.desc {
/*	padding: 4px;*/
	font-size: 14px;
	padding: 2px;
	height: 35px;
	width:52%;
	text-align: left;
	font-weight: bold;
}

table.cavalli td.conf {
/*	border-bottom: 1px solid #e5e5e5;*/
	padding: 2px;
	font-size: 12px;
	width:10%;
	
}
table.cavalli td.cartoni {
	margin: 0px;
/*	padding: 6px 4px 2px 4px;*/
	padding: 2px;
	font-size: 13px;
	color: #000;
	width:10%;
}
table.cavalli td.altro {
	margin: 0px;
/*	padding: 6px 4px 2px 4px;*/
	padding: 2px;
	font-size: 13px;
	color: #000;
	width:8%;
}

table.cavalli tr.row0 {
	background-color: #E5B7B4;
}
table.cavalli tr.row1 {
	background-color: #F2DBD9;
}

table.cavalli tr.row0:hover {
	background-color: #D58B87;
}
table.cavalli tr.row1:hover {
	background-color: #D58B87;
}

Uso joomla 1.0.8, che dovrebbe essere xhtml 1.0.
riporto in allegato l'intero CSS riguardo la parte interessata, ovvero il modulo ecommerce, non quello globale di joomla che poi è quello del template di default solarflare.

[Mich_]

A parte che non hai postato il DOCTYPE, suppongo sia XHTML 1.0 transitional.
IL tuo strumento Joomla mi e` completamente sconosciuto. Potrebbe essere un editor, ma questo il browser non lo viene a sapere: quello che conta e` il codice che arriva al client.

Faccio un attimo di somme:
(10% + 4px) + (52% + 4px) + 2 * (10% + 4px) + (8% + 4px) + (10% + 4px) - 5 * 2px
= 100% + 14px
chiaramente e` piu` del 100%: non puo` starci
(pero` in IE - e in qualche condizione anche Opera - il conto e` diverso, dato che il padding fa parte del width).

[mrsource]

Il problema è proprio nel fatto che in Opera ed IE il padding fa parte del width e i conti se tornano in Firefox poi non tornano in Opera e IE!

Ora ho abbandono le tabelle. Sto facendo una struttura diversa usando tag div e posizionamenti relativi.

Joomla è un CMS Open Source http://www.joomla.it , il doctype è quello da te indicato:
.

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

[Mich_]

3 possibilita` (che vedo in questo momento)
1. non usare il padding, ma solo il margin;

2. fornire a IE un CSS specifico che corregge i conti per lui, tramite commenti condizionali:
<style ...> stile per tutti</style>
<!--[if IE]>
<style ...>stile che corregge i valori per IE</style>
<![endif]-->

3. Passare a XHTML Strict (in cui anche IE segue il W3C).
Ma devi eliminare il prologo XML, altrimenti IE non capisce il DOCTYPE.

[mrsource]

Al punto 1 e 2 diciamo che ci avevo pensato...al 3 sicuramente no.
Mi sarà utile in futuro...adesso ho già faticosamente modificato lo script php in modo da fargli usare una struttura a blocchi (div) utilizzando div in position-absolute dentro div in position-relative. Non è il massimo della chiarezza ma pare funzionare bene.