Alternative Design Project

ADP: 忘れないようにメモ

2008年02月09日 00:11 | コメント(0) | トラックバック(0)

21さんからの指摘で、またもやコメント確認ページでレイアウトが崩壊していたことに気づいた。つぅか、本当にリニューアルするたびに崩壊させすぎ。

レイアウトが崩壊してしまうのは、h1の上のpaddingをうっかりなくしてしまうからだ。position:fixedの今のレイアウト自体そのうち変えるにしても、またやらかしそうなので、(完全に自分用に)メモをしておく。

ページには、.index h1、.archives h1と、その他のh1があり、コメント確認ページや検索結果のページがその他のh1にあたる。

まず、IE4/NN4/MacIE5/au/SoftBankむけにdefault.cssで以下の指定をしているので、これを消す必要がある。

h1, h2 {
    font-size: 100%;
    padding: 4px 2%;
}
h1 {
    background-color: #3152a7;
    color: white;
}

次に、WindowsのIE5は@media print {}に書いたprintメディア用のCSSもscreenメディアに反映させようとするので、@media print {}に書いてある以下の記述を上書きする必要がある。

h1 {
    font-weight: normal;
}
.index h1 {
    margin-bottom: -1em; /* Safari */
    padding: 4px 0 0 1px;
    font-size: 100%;
    color: #792733;
    background-color: transparent;
}
.archives h1 {
    margin: 4px 0 0 0;
    border-top: 2px solid #203F90;
    padding: 18px 0 14px 0;
    background-color: #ecf1fa;
    font-size: 180%;
    text-align: center;
    color: #203f90;
}

結局、screenメディア用の@media screen {}の中には、h1, .index h1, .archives h1の3つとも書き、上記の指定を確実に上書きしなければならない。なんだ、同じ記述があるじゃん、といってむやみに消してはならない(笑)

トラックバック(0)

トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/736

コメント(0)

コメントの内容確認のため、反映されるまで時間がかかる場合があります。e-mailはサイトに掲載されません。

このページの先頭へ