2011-02-07 48 views
5

我有一个HTML页面(PHP,真的)与包含一个图形和两个背景图形(一个重复的梯度,一个右对齐)的表格单元格。它有一个包含样式列表的第二个表格单元格。因为我需要使用PHP来评估图像路径,所以我需要在HTML中定义某些样式,而不是在单独的.css文件中。任何人都可以帮我解释,并解释为什么样式正确地应用于li元素,但不是具有类logoHeader的表格单元格? (li.white是在链接的css文件中定义的,因为它不需要用于路径评估的任何php)。我是一个服务器端程序员,尽管我可以做基本的CSS,但我没有最大的把握继承规则。为什么这个表格单元格没有得到正确的类别?

这里的渲染来源:

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

我也试着定义的类像刚才.logoHeader(相对于td.logoHeader) - 相同的结果。它没有得到风格。这里有一个萤火虫屏幕截图,展示它得到的内容: enter image description here

+1

+1显示完整标记和Firebug的检查尝试。 – 2011-02-07 17:12:47

回答

2

如果我在样式部分删除了您的评论,则可以使用该类应用样式。 CSS评论应该是这样的风格:/* Comment */

编辑:添加例子:http://jsfiddle.net/FMwRr/

+0

这样做。你能解释为什么它只忽略了第一种风格吗?尽管使用格式不正确的评论,但是正确应用了li.blue样式的WAS。 – EmmyS 2011-02-07 17:24:35

相关问题