Drupal(ドゥルーパル)はIEでリストマークが消せない
IEでのリストマーク表示で困っているDrupal(ドゥルーパル)利用者のためにメモ。
Drupalというのは海外で人気の高いオープンソースCMSのひとつ。あまり馴染みが無いかも知れませんが日本ではWeb担当者Forum、海外ではNASAのウェブサイトにも使われている優秀なCMS。
カスタマイズも比較的やりやすそう・・・かな。
ところがカスタマイズを始めて数日後、CSSをいくらいじってもリストマークが消えないというトラブルが発生。消えないというか、Firefoxではちゃんと消えているのですがIEで見ると出たり消えたり不安定。さすがIE、そして唯我独尊マイクロソフト。
IEというのは場合によってCSSの優先命令「!important」すらまともに効かないのですが、まさに今がコレ。カスタマイズ開始早々に立ちはだかる、永遠のライバルIEの壁。
さて・・・どうしようか。
解決策をググってみる・・・無いな。見当たらない。
次に英語で検索・・・すると同じように悩んでいる人の書き込みを発見するも、提案された解決策は「諦めろ」。
探し疲れたので、他力本願を諦めDrupalのシステムソースをざっと眺めてみる。
どうやらmodules/system/system-menus.cssというヤツのリスト指定が抜群に効いているということが判明。
アップデートがめんどくさくなるのでホントはシステムをいじりたくないんですけどねぇ。
もうコレはしようがない。ってことでul. menuの行以外を全て削除することで無理矢理解決しました。
Drupal使いの方、他に良い方法があればコメントでも残していただければうれしいです。
追記:
IE6でリストマークが消える
追記です。検索で来ちゃった『悩める子羊さん』達への置き手紙。
IE6でリストマークが消えるという現象、私もウブな頃にコイツで悩みました。
リストマークというのは非常にやっかいで、基本的にはブラウザごとに異なる表示をします。
デザインにこだわるならリストの左側マージン&パディングを数値で指定する必要があります。
例えばこんな感じ。
ul {
list-style-type: none;
margin: 5px 0 15px 0;
padding: 0;
}
ul li {
font-size: 12px;
line-height: 16px;
width: 200px;
margin: 0;
padding: 3px 0 3px 18px;
background: url(image/list_image.gif) 0 0 no-repeat;
}
上記のケースではリストマークに画像を使用しているのですが、横幅(width)が指定されていないとIE6では表示が不安定になります。ul li {width: —px;}と横幅を数値で指定しておけばバッチリ表示されますよ~。
[ Daisuke ]







ウェブサイトを作るとき注意すべき6項目
HP作成の秘密兵器「コピペ用マスターHTML文書」
検索順位を改善するための思考術
URL末尾に「?img=link」、Googleが重複インデックス
結局のところ、クロスブラウザなんて自己満足なんだと思う
Googleは正確な情報を求めて賢者を探す
マイクロソフト、ついに「くたばれIE6」と言っちゃった
本物の通販サイトを制作できる会社ってどれくらいあるんだろう

管理者 : Daisuke
こんにちは。短気で頑固でお人好しの器用貧乏、Daisukeです
コメントはお気軽にどうぞ。