¿Por qué no se aplica la clase correcta a esta celda de tabla?

Tengo una página HTML (PHP, realmente) con una celda de tabla que contiene un gráfico y tiene dos gráficos de fondo (un degradado repetitivo, uno alineado a la derecha). Tiene una segunda celda de tabla que contiene una lista de estilos. Debido a que necesito usar PHP para evaluar la ruta de la imagen, necesito definir ciertos estilos dentro del HTML, en lugar de hacerlo en un archivo .css separado. ¿Puede alguien ayudarme y explicar por qué los estilos se están aplicando correctamente a los elementos li, pero no a la celda de la tabla con el logo de clase header? (li.white se define en el archivo css vinculado, ya que no requiere ningún php para la evaluación de ruta.) Soy un programador del lado del servidor, y aunque puedo hacer CSS básico, no tengo la mayor comprensión sobre reglas de la herencia¿Por qué no se aplica la clase correcta a esta celda de tabla?

Aquí está la fuente interpretada:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" > 
<head> 
<base href="http://mysite.com/mobile" /> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>Home</title> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<link rel="stylesheet" href="/templates/mobile/css/editor_content.css" type="text/css" /> 
<style> 
    <!-- need to define these styles here because we can't use php in the css - it doesn't evaluate --> 

    td.logoHeader { 
    background: url(/images/mobile/transparentLeavesRight.png) top right no-repeat, 
       url(/images/mobile/transparentLeavesGradient.png) top left repeat-x; 
       text-align:center;} 


    li.blue { 
    background-image:url(/images/mobile/arrow.png); 
    background-repeat:no-repeat; 
    background-position:right; 
    background-color:#013799; 
    } 
</style> 
</head> 
<body> 
<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
<tr><td class="logoHeader"><img src="/images/mobile/logoCopy.png" alt="Senior Living" /></td></tr> 
<tr><td> 
<ul class="pureCssMenu"> 
    <li class="white">1-800-888-8888 </li> 
    <li class="blue"><a href="/about">ABOUT US</a></li> 
    <li class="blue"><a href="/care-types">CARE TYPES</a></li> 
    <li class="blue"><a href="/find-a-community">FIND A COMMUNITY</a></li> 
    <li class="blue"><a href="/programs">PROGRAMS</a></li> 
    <li class="blue"><a href="/gallery">VIDEO GALLERY</a></li> 
    <li class="blue"><a href="/contact">CONTACT US</a></li> 
</ul> 
</td></tr> 
</table> 

</body> 
</html>

También he intentado definir la clase que acaba de .logoHeader (en contraposición a td.logoHeader) - mismos resultados. No tiene el estilo. Aquí hay una captura de pantalla de Firebug que muestra lo que está obteniendo: enter image description here

Fuente

2011-02-07 EmmyS

1 para mostrar el marcado completo y los intentos de inspección Firebug. –

Puedo aplicar los estilos usando esa clase si elimino su comentario en la sección de Estilo. CSS comentarios deben ser este estilo: /* Comment */

Editar: ejemplo añadido: http://jsfiddle.net/FMwRr/

Fuente

2011-02-07 17:23:05

Eso lo hizo. ¿Puedes explicar por qué solo ignoró el primer estilo? El estilo li.blue se estaba aplicando correctamente, a pesar del comentario mal formateado. – EmmyS

¡Eso es todo! Buen ojo. –

Los navegadores intentan mostrar CSS mal/roto lo mejor que pueden, Chrome parece que se recuperó y pasó a aplicar el siguiente estilo correctamente. Sin embargo, no estoy 100% seguro. –

¿Por qué no se aplica la clase correcta a esta celda de tabla?

Respuesta

Cuestiones relacionadas