お久しぶりです、PBロッキーです。
サイトに導入しようと思っていた、CSS だけでつくる LightBox に進展があったので、久々にサイトの HTML にちょっと手を入れたりしていました。
footer-fix
ちょうどこのたびは、コンテンツ量が少なくてもデザインくずれを起こさないようにフッターを固定するというページを見つけていたので、早速導入してみたのでした。
Opera10 でフッターが画面をはみ出してしまっていた。以下の記事で解消。
ジオシティーズのHPでできてしまう空白に対処
ローカルでは狙い通り表示されたのですが、ジオシティーズにアップロードすると現れるページ下の余白が気になりました。せっかく背景画像を一番下まで敷き詰めようと思うのに、20px程度の高さの余白ができてしまいます。
こいつの正体は、1×1サイズの画像ファイルでサイトのアクセス解析情報を Yahoo!Geocities に通知しています。こいつを CSS で消してやると、見事に上記の余白は消えてくれました。
PB-100の宇宙の構造は、html - body - div - コンテンツ(img他) という感じで、画像は必ずdivの下にあります。一方で、アクセス解析用imgはbodyの直下に埋め込まれます。
そこで次のようなcssを書いたのでした。
img { display: none;}
div img { display: inline;}
IE8で画面が真っ白
また、IE8でサイトを表示してみると画面が真っ白になってしまっていた… これは、html ファイルの文字コードは utf-8n なのですが、それを宣言する meta タグを title より後に設定していたためでした。
title が日本語の場合は、meta タグのエンコード宣言は必ず title の前にします。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
utf-8 の場合は meta タグの位置が後ろでも表示されましたが、utf-8 は IE で不具合がおきたり、html の文法チェックで減点されるようです。