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つとも書き、上記の指定を確実に上書きしなければならない。なんだ、同じ記述があるじゃん、といってむやみに消してはならない(笑)
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/736