Sunday , February 05 , 2012

Drupal(ドゥルーパル)はIEでリストマークが消せない

DrupalIEでのリストマーク表示で困っている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 ]

コメントはまだありません

  • 管理者 : Daisuke

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

  • 管理者による内容確認後に表示されます。多少時間がかかる場合がありますのでご了承ください。
  • メールアドレスや人物の氏名など、個人が特定されるおそれのあるコメントは掲載いたしません。
  • Gravatarに登録済みの方はメールアドレスを入力するとアバターが表示されます。




:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

e-まが
(H21.7~更新中?)
JavaScriptやCSSなど、ウェブデザインの実装チュートリアルを紹介するブログ。

SEO & DESIGN
(H19.4~H20.11)
SEOとウェブデザインに関してのブログ。現在は更新を停止、当サイトの下層に移転しました。