スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - | pookmark |

Safariにだけ出るリスト内の画像の上下の余白

リストメニューに画像を使用した場合、
WindowsのIEやFirefoxでは特には問題はなかったが、
Windows版Safari、および、Mac版Safariで閲覧した場合に、
リスト内に使用している画像の上下に余分な余白があいてしまう。

なんだ。これ!!Σ( ̄□ ̄;)

と、いろいろ調べみたら、
.clearfix:after部分にline-height:0;を追加することで少し余白が縮められることがわかった。

1文字分余計に認識されていしまっているために、
上下の余白があいてしまう模様。

さらに、
リスト部分に、
font-size:**;
を指定すると、もっと余白を縮められる。
例えば、1pxとか。

font-sizeはあまり触りたくないので、
ほかの対策方法を模索中。

とりあえず、忘れるといけないので、メモ。

メモしておかないと、絶対忘れるしな〜。










| STYLE CSS HTML | 10:27 | comments(0) | trackbacks(0) | pookmark |

スタイルシートメモ

3カラムのページレイアウトでリニューアル準備中。

左側にサイドメニューを表示する形式。

スタイルシートをかますと、Operaと、IE6.0の表示の違いが多々発生するので、今後も同じような現象が起こったときにすぐに対処できるようにと、メモをすることにした。


サイドメニュー部分。

リスト部分の全体のスタイルを

ul,dd,dt,dl {
margin: 0px;
padding: 0px;
}

li {
list-style: none inside;
}


とし、
サイドメニューのリストにたいしては、

.side li {
background: #FFFFFF url(images/sidemenu_ic.png) no-repeat left top;
list-style: none inside;
}


と指示。
サイドメニューのリストの背景に、三角マークの画像を左側に1枚だけ表示する形式をとりたかった。

Operaでの表示だとリストの左部分の余白が0になるのだが、
IEで閲覧すると、左部分の余白スペースを0とうまく認識されない。

なにがいけないのかと思ったら、

.side li {
background: #FFFFFF url(images/sidemenu_ic.png) no-repeat left top;
list-style: none inside;
}


insideの部分がいけなかった。

.side li {
background: #FFFFFF url(images/sidemenu_ic.png) no-repeat left top;
list-style: none outside;
}


とすることで、リストの左部分が綺麗に0と認識された。
たったこれだけのことなのに、こんなにも表示方法が異なるのか。

スタイルシートを比較的正確に読んでくれるOperaがあるおかげで、この問題点に気づけてよかった。



結果として、スタイルシートの全体にリストに対して、

li {
list-style: none outside;
}


とし、サイドメニュー部分を

.side li {
background: #FFFFFF url(images/sidemenu_ic.png) no-repeat left top;
}

と修正するだけでよかったっぽい。




サイドメニュー部分の完成体

.side li {
background: #FFFFFF url(images/sidemenu_ic.png) no-repeat left top;
padding: 0px 10px;
}
| STYLE CSS HTML | 18:01 | comments(0) | trackbacks(0) | pookmark |

07
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--
Profile
Sponsored links
New entries
Archives
Categories
Recent comment
Recent trackback
Recommend
グループサイト
b-cures. groupb-cures.hmtl sampleTemplate b年賀状フリーイラスト集年賀状フリーテンプレート集年賀状フリーデザイン賀詞集年賀状フリーフォトフレーム集暑中お見舞い夏のご挨拶
Mobile
qrcode
Links
Others
無料ブログ作成サービス JUGEM