Traditional on the Ice

ARTICLE PAGE

-- --

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
02 2009

ブラウザの違いに負けないリストマーク@HTML + CSS

テスト前になると急に掃除を始めるというのはよくある話で、
今年の正月は修士論文執筆というプレッシャーからか、例年以上に部屋が片付いています。

そして次なる現実逃避はブログのテンプレート改造・・・ということで、ブログのデザインが変わりました。
テンプレートの原型はVicuna CMSさんで配布しているsmart_canvasです。
それを、ちょこちょこと改造して使ってます。

その過程で、Listタグ周りの挙動に苦労したので
「リストマークに画像を用い、かつリストがネストされたときにインデントを任意調整。さらにその見た目をIE系とGecko系で同じにする方法」についてメモ
リストマークと本文テキストの距離はpadding-leftプロパティで調整します。
また、リストを入れ子にした場合のインデント幅は
IEではmargin-left
Firefox(Gecko)ではpadding-left
で調整されているようです。この違いが両ブラウザでのレンダリング結果の違いの原因です。

というわけでこんな感じの記述に。
ul{
padding:0px;
margin:0px;
}

ul ul {
padding-left: 1em;
margin-left: 1em;
}

ul li {
list-style-type:none;
padding-left:10px;
background-image: url("path for image file");
background-repeat: no-repeat;
background-position: 0 0.40em;
}
とりあえず、最初にulタグのmarginとpaddingを0にしてIEとFirefox(Gecko)の違いをキャンセル。
続いてネストされたulタグの左側にmarginとpaddingを用いてインデントを調整。2つの属性を指定することで両ブラウザで同じだけのインデントが行われます。

ここまでが、ブラウザに左右されないインデントについての記述。
ulタグ内のliタグにはリストマークの画像への差し替えに関する記述を加えます。

list-style-image属性で行う方法もありますが、list-style-position属性の値次第で挙動が変わってしまうため、今回は
・リストマークを表示しない
・paddingで字下げ
・背景画像をリピートしないで表示(=左側に1つだけ表示)
という方法で実現しています。

このブログのメニュー部分や↓のリストのような感じになります。

メモおわり。

関連エントリ

- 0 Comments

Leave a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。