<li>にスタイルを指定したのに効かない

Question

<tr>
    
        <td class="title">
        キャリア名<?php echo $career;?>
        </td>

        <td id="content_sub">
            <ul>
            <?php foreach($phones as $phone):?>
                
                <li id="<?php echo $phone;?>">
                    <label>
                        <input type="checkbox" name="<?php echo $career;?>_phones[]" 
                        value="<?php echo $phone;?>" />
                    <?php echo $phone;?>
                    </label>
                </li>

            <?php endforeach;?>
            </ul>
        </td>

    </tr>

td#content_sub{
	
	padding: 20px 0 20px 20px;
	width: 1300px;
	height: 50px;
	position: relative;
}

li#iPhone{
	position: absolute;
	bottom: 40px;
	border:solid 1px red;
}

li#Android{
	position: absolute;
	left: 140px;
	top: 20px;

	
}

li#WindowsPhone{
	position: absolute;
	left: 300px;
	top: 20px;
}

li#FirefoxPhone{
	position: absolute;
	bottom: 20px;
	

}

li#choromePhone{
	position: absolute;
	left: 140px;
	bottom: 20px;
	
}

li#other{
	position: absolute;
	left: 300px;
	bottom: 20px;
}

■言語
html,css

■目的

<li>にそれぞれposition:absoluteを指定し（親要素の<td id="content_sub">にposition:relativeを指定）それぞれの<li>を動かしたい。 このときHTMLは変えない。

■困っている事
なぜか<li>の一番最初のli#iPhoneだけ動いてくれない。
常に<td id="content_sub">の真ん中にいる。

※ソースコードで見ると、li#iphoneが横いっぱいになっています・・

htmlの方はphpで出力しています。id名は下の画像のようにちゃんと合っています。

Comments

[kei344]

出力されたHTML（ブラウザで「ページのソースを表示」）を質問文に追記ください。

[kei344]

HTMLはスクリーンショットでなく、コードとして掲載してもらえませんか？

Answer 1

li#iPhone{

となっていますが、出力されたHTMLコードではきちんとid="iPhone"になっていますか？
ボーダーも効いていないようなのでそもそもid名が該当していない可能性があります。

【追記】
HTML見たところidはあっているようですね。
CSSの記述も、文法上のケアレスミスなどは見当たりません。
気になる点は、基準となる親要素がulではなくtdのposition:relative;になっていることですが、
たとえばulにposition:relativeを指定し、すべてのli要素にtop,leftまたはbottom,leftをすべて省略せず指定した場合はどうなりますか？

Comments

[NatsumiOki]

あとは、CSSの別の場所で同じidを使ったり、もしくはもっと強い詳細度のセレクタで
#○○ > △△ > table td li:first-childみたいなのがあったり。
想像できるのはそのくらいですかね…

[a7ing01]

コメントありがとうございます！
ulにposition:relativeを指定しても変わりませんでした・・・

[a7ing01]

単純にcssに<?php〜>のコードを書いてしまったことが原因でした・・
ありがとうございました。

[NatsumiOki]

失礼ですが笑ってしまいましたｗ
原因がわかってよかったです！

Answer 2

プログラム的な問題の可能性が高いと思います。$phonesという値はどこからどうやって取得していますか？

phpを使ったデバイス判別は、以下のようなプログラムが有名ですが、けっこう勘違いを起こしやすい部分があります。

$phone = $_SERVER['HTTP_USER_AGENT'];
$pos = strpos('iPhone',$phone);

いきなり$phoneにiPhoneやAndroidといった値が代入されるわけではありません。それらのデバイス情報を含んだユーザーエージェント情報（つまり、iPhoneならiPhoneという文字を含んだ長ったらしい文字列）が代入されます。そこで、必要なデバイス情報を判別するために、その文字が含んでいるかどうかをstrpos関数で判定します。そして$posには見つかった最初の文字の場所（5文字目なら5という風に）,そして見つからなかった場合はfalseといった結果が入ります。この判定を元に

if($pos !== false){
　$device = "iPhone";
}

このように値を代入して、初めてiPhoneという値が入るわけですが、何か引っかかる部分があるなら、参考にしてみてください。

Comments

[a7ing01]

単純にcssに<?php〜>のコードを書いてしまったことが原因でした・・
ありがとうございます。
こちらは今後参考にさせていただきます！

Answer 3

CSSが別ファイルに記述されていて、キャッシュを読み込んでいる状態ということはないですよね？

Comments

[a7ing01]

単純にcssに<?php〜>のコードを書いてしまったことが原因でした・・
ありがとうございます・・。