Geek Answers Handbook

Why is this table not using the correct class?

I have an HTML page (actually PHP) with a table cell that contains graphics and has two background graphics (one repeating gradient, one aligned right). It has a second cell in the table that contains a list of styles. Since I need to use PHP to evaluate the path to the image, I need to define certain styles inside HTML, and not in a separate .css file. Can someone help me and explain why the styles apply correctly to the li elements, but not to the table cell with the logoHeader class? (li.white is defined in the linked css file since it does not require any php to evaluate the path.) I am a server-side programmer, and although I can do basic CSS, I don't have the best understanding of the inheritance rule.

Here is the source provided:

<!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>

I also tried to define the class as simply .logoHeader (unlike td.logoHeader) - the same results. He does not get style. Here is a screenshot of firebug showing what it gets: enter image description here

+5
source share
1 answer

I can apply styles using this class if I delete your comment in the "Style" section. CSS comments should be like this:/* Comment */

Edit: added example: http://jsfiddle.net/FMwRr/

+2
source

More articles:


All Articles