見た目をいじくったら・・・・

ちくしょーーー、

”何となく”という理由で
wordpressのスタイルシートをいじったら

なんとか、だいたい修理できたけど。
むーー、一日かかった。。。
もう疲れた。。。。

ということで、勉強になった点をいくつかメモしておこうっと。

●まず、paddingを使って、縁取りに色をつけるならば。
borderをつかったほうがよい

#p img {
padding: 6px;
backgroundcolor:#000;
}

これを↓の様にする

#p img {
border: 6px solid #000;
}

理由は、
IE、sleipnirブラウザでは、paddingでの設定が反映されない部分があった
理由はわからないけど、タイプミスは確認したので、ほかに理由があるはず。

firefoxはpaddingでも問題なかったけども。

ここはやはり、borderで設定したほうがよい。

左右上下、細かく指定するならば

#p img{
border-top: 0px solid #000;
border-left: 0px solid #000;
border-right: 12px solid #000;
border-bottom: 18px solid #000;
}

こんな感じで、それぞれ、上、左、右、下、と分けて設定する
詳しくはこちらのサイト様をごらんあれ

●フォントのサイズ指定に%を使わない
font-size: 120%;などと設定すると、

ブラウザでフォントサイズを変える操作をしなくても
なぜか大きさが切り替わることがある

スタイルシートのフォントサイズの指定に
少し問題があるのかと思われる。

安全なのは、
font-size: 0.6em;という風に設定すれば
一応問題なく表示されている。

これが起こるのはIEとSleipnir、
safariとfirefoxは問題ないと思う。

●ulリストのスタイルをnoneと指定しても
なぜか、firefoxだと»が表示されてしまう・・・・

もう、なんでだか分からないいし
調べるきもしなくなってきた。。。。
ただ、下手に打ち込まれたhtmlだと、ちゃんとnoneが反映されて
リストのマークは消えるんだけどなぁ・・・

●firefoxとie、sleipnirでfooterの表示が確実にずれる。
これは、今まで”運良く気がつかなかった”だけで
どうやら、forefoxとIEではずれが出ている様。

ノーマルな設定でもIEで1pxずれる事を確認した。
何でだろう・・・・。
変なスタイルシートの書き方はしていないと思うんだけど。

あと、 clear: both;はきちんと入れておこう・・・

とにかく
IE、sleipnirとfirefox、safariで見た目が結構変わるところがあるので注意
ほかの、ブラウザは知らない・・・・

あー疲れた・・・・