<< Prev Page Next Page >>

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


FirefoxでXHTMLでページ上部に空白が入っちゃう場合

さて最近悩んでいた問題を最も簡単なサンプルコードを使って解決できたのでここに記すよ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" />
<link rel="index" href="index.html" />
<title></title>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
#pageall {
    background-color:blue;
}
#contents {
    background-color:#e0e0e0;
   
}
</style>
</head>
<body>
<div id="pageall">
    <div id="head">
    <h1>[h1]テストページなんだぜ!</h1>
    <div id="subtitle">[subtitle]この辺がヘッダなんだぜ!</div>
    </div>
   
    <div id="contents">[contents]ここに内容を書いたりするんだぜ!</div>
</div>
</body>
</html>
謎の空白

こんなすっごく簡単なXHTMLを作ってFirefoxで表示すると、ページ上部に謎の空白が入っちゃう。どう考えても、DIV id="pageall"はページ上部にぴたっとくっつかなきゃおかしいのに。なんでやー。

調べたらわかった。

h1のマージン。

[3848] Re: IE以外で表示される空白

まじっすか。

h1 { margin:0; }
空白が解決

まじかーー!

なんでh1のマージンが、h1を囲むdivの外側に表示されちゃうの!firefoxしっかり!ていうかこれCSSの仕様なのか?わからん。

あとバッドノウハウついでにメモ。

  • XHTMLにxml宣言をつけるとIE6で後方互換モードになっちゃうので、xml宣言はつけないのが良い。
  • 標準準拠モードにすると、IE6でもmargin-right:auto;margin-left:auto;でブロックの真ん中寄せができる。
  • ちなみに上記のXHTMLで、#pageall {border:1px solid transparent} とやると、Firefoxでは上部空白が消える。ただしIE6で黒い枠線が表示される。
  • さらに * html #pageall {border 0 none !important;} とかやればIE6で枠線が消せる…とか泥沼になるのがやだったの!いやったらいや!

なんとか解決できそうな雰囲気だけど、また望む表示をするためにdivタグをひとつ余計に入れ子にするとかもう、ほんとバカみたいすぎる。だれかこのバカバカしさを終わらせてほんとに。


この記事に対するコメント

この記事に対するコメントの投稿



管理者にだけ表示を許可する

この記事に対するトラックバック

トラックバックURL
http://tockri.blog78.fc2.com/tb.php/165-3f09286f
この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。