[css]compatibilità explorer&co/firefox&co

[superbau]

Salve, ho creato un css con una istruzione del tipo:

.td1 {
	font-family: Verdana;
	font-size: x-small;
	text-transform: none;
	color: White;
	background-color: #2C3630;
	border: 1px outset;
	border-color: #647469;
	text-align: left;
	}

Qual'è il problema?
Di fondo explorer & co lo visualizzano correttamente come lo ho progettato, mentre firefox & co, mi fanno una bordaura bianca che non mi aggrada, posto allegato per dimostrazione.
Fra l'altro, pure le dimensioni del dvi me le sbaglia come noterete dalle foto. Di sotto il codice div layer1

#Layer1 {
	position:absolute;
	width:150px;
	height:100px;
	z-index:7;
	left: 10px;
	top: 150px;
	float: left;
}

Classe allegata al div:

.Div02 {
	font-family: Verdana;
	font-size: x-small;
	text-transform: none;
	color: #000000;
	background-color: #403C36;
	text-align: center;
	border: 1px outset;
	border-color: #000000;	
}

Premetto che non è la classe del div il problema, pk anche togliendola il problema rimane, almeno per la bordatura bianca...

[superbau]

nessuno sa darmi una risposta? VVoVe:

[salasir]

Sarebbe meglio che indicassi anche il codice (X)HTML per capire meglio

[superbau]

<div class="Div02" id="Layer1">
  
    <table width="130" border="1" align="center"  class="tabble1">
      <caption align="top" class="Stile1">
        CONSOLE
      </caption>
      <tr>
        <th colspan="3" class="td2" scope="col"></th>
      </tr>
      <tr>
        <th colspan="3" class="td2" scope="col"></th>
      </tr>
      <tr>
        <th colspan="3" class="td2" scope="col"></th>
      </tr>
      <tr>
        <th colspan="3" class="td2" scope="col"></th>
      </tr>
      <tr>
        <th colspan="3" class="td2" scope="col"></th>
      </tr>
      <tr>
        <th colspan="3" class="td2" scope="col"></th>
      </tr>
      <tr>
        <th colspan="3" class="td2" scope="col"></th>
      </tr>
      <tr>
        <th colspan="3" class="td2" scope="col"></th>
      </tr>
      <tr>
        <th colspan="3" class="td2" scope="col"></th>
      </tr>
    </table>
    


</div>

[salasir]

Se vuoi un consiglio, pulisci tutte le definizioni di stili e sovrapposizioni di classe dal codice html e sposta tutto nei css.
Resta più pulito e più facile da capire e modificare. Inoltre con definizioni parte nei css e parte nei tag è possibile creare indecisioni e scelte sbagliate nei browser.
Per esempio:

      <caption align="top" class="Stile1">
        CONSOLE
      </caption>

trasformalo in

      <caption>
        CONSOLE
      </caption>

CSS
.Div02 caption { definizioni di stile1 }
   oppure
#Layer1 caption { ... }

Le definizioni per le singole celle diventano

.Div02 td
    oppure
#Layer1 td {
	font-family: Verdana;
	font-size: x-small;
	text-transform: none;
	color: White;
	background-color: #2C3630;
	border: 1px outset;
	border-color: #647469;
	text-align: left;
	}

eccetera. Visto che utilizzi alcuni accorgimenti di accessibilità, definisci anche i tag <thead> (<tfoot> se serve) e <tbody> con i quali puoi ulteriormente diversificare le definizioni di righe o celle
(.Div02 tbody td { ... } .Div02 thead td { ... } )

Ti indico un link che può essere utile per vedere le possibilità di intervento sulle tabelle con i CSS.
CSS Table Gallery

[superbau]

graxie

[salasir]

Buon lavoro!