2008年08月12日

cssとfirefox

依頼されて作成・管理をしている某サイトを大幅に書き換えようと、今時なので当然CSS主体のデザインにしてみたが、IEでなく、試しにfirefoxで見たら、メニューや見出し部分のレイアウトが違っていることが分かった。
CSSは見たが大きな間違いはなさそうなので、ブラウザの解釈の違いかと思い、調べてみたらその通り。
paddingのブラウザによる違い

* IEの場合
 o 指定した幅・高さの内側に余白が作られる。
* Firefox、Netscapeの場合
 o 指定した幅・高さが指定した余白の分だけ拡大され、その内側に余白が作られる。
http://css.uka-p.com/reference_margin.shtml
 これって、実質的にpaddingが使えないのと同じ事ではないか。

それから今回気づいたことだが、同じhtmlファイルで、
common.css
about.css
の2つのcssファイルを読み込み、両方に
.title_main
の指定が共通してあると、同じ項目ならば後者の指定に従うのだが、前者にしかない項目は前者に従う・・・。考えてみれば当然なのだが、使い回しには気をつけなければならない、と反省。

追記--------------
同じ一つのcssファイルの中で、

A.btn {
display: block; /* ブロック要素にする */
width: 140px; /* 横幅 */
background-color: #666699; /* 背景色 */
border: outset 2px #9999cc; /* 枠の色 */
margin: 0px;
padding: 3px 1px 1px 0px;
line-height: 1.2em; /* 行の高さ */
text-decoration: none; /* 下線を消す */
text-indent: 0.5em /* 文字1文字分下げる */
}

A.btn:hover {
color: #eeeeee;
background-color: #555588; /* 背景色 */
border: inset 2px #9999cc; /* 枠の色 */
margin: 0px;
padding: 4px 0px 0px 1px;
}

と、hoverの場合の項目を変更すると、マウスカーソルが乗った時、一部だけ変更になる。
(ちなみに今回教訓の多かった、paddingが入っているので、IEとFIREFOXで表示サイズが異なるが、1pxとか2pxなので良しとした。
posted by kewpie at 22:48| Comment(0) | TrackBack(0) | ファイル作成
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/17904527
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。