2011-02-07 4 views
5

私は、グラフィックを含むテーブルセルを持つHTMLページ(PHP、実際)を持っていて、2つのバックグラウンドグラフィックス(1つは繰り返しグラデーション、もう1つは右揃え)です。これは、スタイル付きリストを含む2番目のテーブルセルを持っています。私は画像パスを評価するためにPHPを使う必要があるので、別の.cssファイルではなく、HTML内で特定のスタイルを定義する必要があります。誰も私を助けて、スタイルがli要素に正しく適用されている理由を説明することができますが、クラスlogoHeaderを持つ表のセルには適用されません。 (li.whiteはリンクされたCSSファイルで定義されているので、パス評価にPHPは必要ありません)。私はサーバーサイドのプログラマーですが、基本的なCSSを行うことはできますが、継承のルール。同じ結果 - 私もちょうど.logoHeader(td.logoHeaderではなく)としてクラスを定義しようとしたこのテーブルセルに正しいクラスが適用されないのはなぜですか?

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

:ここ

は、レンダリングされたソースです。それはスタイルを取得しません。それは何を得ているのかを示す火かき棒のスクリーンショットです:

+1

+1フルマークアップとFirebugの検査の試行を示すためのCSSのコメントはこのスタイルでなければなりません。 –

答えて

2

[スタイル]セクションでコメントを削除すると、そのクラスを使用してスタイルを適用できます。 /* Comment */

編集:追加例:http://jsfiddle.net/FMwRr/

+0

それはそれをしました。なぜそれが最初のスタイルだけを無視したのか説明できますか?ひどく書式化されたコメントにもかかわらず、li.blueスタイルが正しく適用されました。 – EmmyS

+0

それだけです!良い目。 –

+0

ブラウザは悪い/壊れたCSSを可能な限り試してみると、Chromeは回復したように見え、次のスタイルを正しく適用するようになりました。しかし100%確かではありません。 –