Menu
I have an HTML page (PHP, really) with a table cell that contains a graphic and has two background graphics (one repeating gradient, one right aligned). It has a second table cell that contains a styled list. Because I need to use PHP to evaluate the image path, I need to define certain styles inside the HTML, instead of in a separate .css file. Can anyone help me out and explain why the styles are being correctly applied to the li elements, but not to the table cell with class logoHeader? (li.white is defined in the linked css file, as it doesn't require any php for path evaluation.) I'm a server-side programmer, and although I can do basic css I don't have the greatest grasp on rules of inheritance.
Here's the rendered source:
<!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've also tried defining the class as just .logoHeader (as opposed to td.logoHeader) - same results. It doesn't get the style. Here's a firebug screenshot showing what it's getting:
367
I can apply the styles using that class if I remove your comment in the Style section. CSS comments should be this style: /* Comment */
Edit: added example: http://jsfiddle.net/FMwRr/
53
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
