colores celdas no funcionan en ie6, firefox ok

[pepepercebe]

hola, creo una tabla mediante javascript en un div llamado main. He creado 6 clases y dependiendo de la clase quiero que el color de la celda sea diferente.
El problema es que en ie6 no funciona mientras que en firefox va perfecto (como casi siempre).
El codigo css que he creado es el siguiente:

Código:

El codigo para las clases es el siguiente:
(en firefox va igual si pongo td.nombreclase que .nombreclase, son pruebas que he hecho para ver si asi se la tragaba el ie6.

td.modelosESP {
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
background-color:#FFCC99;
text-align:center;
border: 0;
} 
td.modelosTLF {
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
background-color:lightyellow;
text-align:center;
border: 0;
} 
td.modelosORE {
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
background-color:#FF6600;
text-align:center;
border: 0;
} 
.modelosVDS {
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
background-color:#FF3300;
text-align:center;
border: 0;
} 
.modelosESK {
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
background-color:#66CC00;
text-align:center;
border: 0;
} 
.modelosYGS {
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
background-color:#6666FF;
text-align:center;
border: 0;
} 

y este es el codigo del div main:

#main {		background-color:#ffffff;
			 background-image: url(images/logo/logo.jpg);
			  background-repeat: no-repeat;
			background-attachment: fixed;
			background-position:50% 50%;
			width:auto;
			  height:auto;
			  left:0px;
			  font:Arial, Helvetica, sans-serif;
			  font-size:18px;
}

Yo creo que ie6 me crea la tabla con el estilo de main y no con el de las clases mientras que firefox si que lo hace.
Espero me podais ayudar.

Salu2

[kseso?]

Hola Pepepercebe
define las clases sin el "td" previo que le tienes:

Código css:

.modelosESP {
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
background-color:#FFCC99;
text-align:center;
border: 0;
} 
.modelosTLF {
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
background-color:lightyellow;
text-align:center;
border: 0;
} 
.modelosORE {
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
background-color:#FF6600;
text-align:center;
border: 0;
} 
/*en todas y cada una*/
 

y en el html:

Código html:

<tr>
<td class="modelosESP">
 

Un saludo

[pepepercebe]

hola gracias por contestar, pero esa es lo que habia hecho en un principio y no va, entonces añadi el td delante. Si te fijas las 4 primeras clases pone td. pero en las dos ultimas lo pone como tu dices y no me funciona.

[kseso?]

Hola de nuevo, Pepe.
Te comento. Por incompatibilidad de soft tengo que usasr ietester para emular el ie6. Y todos sabemos que no es muy fiable.
Con el código que te puse, sí toman las propiedades.

Así que creo que debe estar en otro punto el porqué a ti no.
¿Puedes poner el código html generado por el navegador?

Mientras, lo que puedes hacer para descartar que sea culpa del js es ver si hay diferencia entre el html generado por ff y el de ie6.

Un saludo

[pepepercebe]

yo tb estoy trabajando sobre linux emulando ie6 con ies4linux, pero lo he probado con otra maquina en windows ie6 y obtengo el mismo problema.

Al generar la tabla con Javascript mediante DOM si le doy a ver codigo fuente en ie6 me sale el main que tenia en un principio y no la tabla actual que seria la que quiero colorear mediante css.
Te pongo el codigo de la tabla resultante generado con Firebug en Firefox:

Código:

<div id="main">
<table id="tablaModelos" cellspacing="0" cellpadding="0" border="1" align="center" name="tablaModelos">
<tbody id="tBodyModelos">
<tr>
<td/>
<td>N</td>
<td>Imagen</td>
<td>Modelo</td>
<td class="modelosESP">1</td>
<td class="modelosTLF">2</td>
<td class="modelosORE">3</td>
<td class="modelosVDS">4</td>
<td class="modelosESK">5</td>
<td class="modelosYGS">6</td>
<td>Ingenieria</td>
<td>Bloqueo</td>
<td>id</td>
</tr>
<tr>
<td/>
<td>1</td>
<td/>
<td>B1200</td>
<td class="modelosESP">V1.63</td>
<td class="modelosTLF">N/A</td>
<td class="modelosORE">3.65</td>
<td class="modelosVDS">N/A</td>
<td class="modelosESK">3.76</td>
<td class="modelosYGS">N/A</td>
<td>tecla PWON </td>
<td>N/A</td>
<td>257</td>
</tr>

</tbody>
</table>
</div>

El codigo original del div main copiado de ver codigo fuente en ie6:

Código:

<div id="main">
        	
            	<table border="0" bgcolor="#FFFFFF" height="400" width="950">
                  <tr>
                    <td><img src="../images/main_sds.jpg" width="950" align="top"/></td>
                  </tr>
                </table>        
			</div>

[kseso?]

Pues como verás, en ie6 no estás generando la misma tabla que en ff.

Así que creo que debes revisar el script, Pepe.

Un saludo

[pepepercebe]

Gracias Kseso pero no es qke no funcione bien ie6 , es que no tengo una aplicacion como firebug para ie6 que me consiga el codigo modificado dinamicamente con el DOM de Javascript.

No se porque pero no consigo que ie se trague las clases y he buscado otro camino, yo creo que mas complicado y que me hincha el codigo html pero que me funciona.

Yo os pongo lo que he hecho con el DOM de Javascript y si alguien me dice porque me fallaba el anterior codigo os lo agradeceria aunque ya me funcione de esta otra manera.

Código:

Esto es mas javascript que css, pero bueno a la espera que me ayudeis esto me funciona, y si le sirve a alguien en un futuro mejor.

//defino los estilos ya que si lo hago en el archivo css ie6 no se los traga
		var cabecera = document.getElementById('cabeceraModelos');
			cabecera.style.fontFamily = "verdana, arial, helvetica, sans-serif";
			cabecera.style.fontSize = 16;
			cabecera.style.color = "#CC0066";
		var nameModelo = document.getElementsByName('tdModelos');
		for	(var z=0;z<=nameModelo.length-1;z++) {
			//aplico las propiedades de estilo comunes a todas las clases
			nameModelo[z].style.fontFamily = "verdana, arial, helvetica, sans-serif";
			nameModelo[z].style.fontSize = 12;
			nameModelo[z].style.color = "#ffffff";
			nameModelo[z].style.textalign = "center";
			nameModelo[z].style.border = 1;
			nameModelo[z].style.borderColor = "#000000";
			nameModelo[z].style.opacity = ".75"; //opacidad para firefox
			nameModelo[z].style.filter = "alpha(opacity=75)";//opacidad para ie
			
			var clase = nameModelo[z].getAttribute('class');//nos da el nombre de la clase y segun la clase le aplico los atributos especificos de cada clase
			switch (clase){
				case 'modelosESP':
					nameModelo[z].style.backgroundColor = "#FF0099";
					break;
				case 'modelosTLF':
					nameModelo[z].style.backgroundColor = "#0033FF";
					break;
				case 'modelosORE':
					nameModelo[z].style.backgroundColor = "#FF6600";
					break;
				case 'modelosVDS':
					nameModelo[z].style.backgroundColor = "#FF3300";
					break;
				case 'modelosESK':
					nameModelo[z].style.backgroundColor = "#66CC00";
					break;
				case 'modelosYGS':
					nameModelo[z].style.backgroundColor = "#6666FF";
					break;
			}
		}