Moodle開発者フォーラム

　携帯電話やゲーム機のブラウザ（PlayStation3）でMoodleのコース画面などを表示すると，添付した図のようにアイコンと項目の文字列がズレて表示されます．

　HTMLソースを見てみると，

<div class="content">
    <ul class='list'>
        <li class="r0">
            <div class="icon column c0">
                <img src="http://mysite.com/moodle/pix/f/web.gif"; height="16" width="16" alt="" />
            </div>
            <div class="column c1">
                <a href="http://mysite.com/"; target="_blank">鈴鹿高専</a>
                <em></em>
            </div>
        </li>

おおよそこのような構造になっています．リストタグの要素の中に二つのブロック要素が<div>アイコン</div><div>項目</div>のように入っています．その結果，アイコンの後に改行が入って表示されるのか．私の理解が浅いのですが，この部分を<span>アイコン</span><div>項目</div>のようにアイコンの部分だけをインライン要素にすればPCブラウザと同様の画面表示になります．携帯電話とPS3のブラウザはNetFrontのようですので，CSSへの対応が完全ではありません．そのせいで見た目が変わるのかも知れません．

　関係するソースコードは，lib/weblib.phpのfunction print_side_block()で，以下のように改造すれば望みどおりに表示されます．ただ，副作用は怖いですね．

         if ($list) {
            $row = 0;
            //Accessibility: replaced unnecessary table with list, see themes/standard/styles_layout.css
            echo "\n<ul class='list'>\n";
            foreach ($list as $key => $string) {
                echo '<li class="r'. $row .'">';
                if ($icons) {
//                  echo '<div class="icon column c0">'. $icons[$key] .'</div>';
                    echo '<span class="icon column c0">'. $icons[$key] .'</span>';
                }
                echo '<div class="column c1">'. $string .'</div>';
                echo "</li>\n";
                $row = $row ? 0:1;
            }
            echo "</ul>\n";
        }

まぁ，これくらい仕方がないかなぁ，と思って我慢していたのですが，ちょっとここを直すだけでPS3使用時の劣等感が一気に解消します．

　なぜ，divを使うのか．spanではいけないかったのでしょうか．