次の2つのページはHTML/CSS的にほぼ同じ構成なんですが、OPERA(9.25)で見たときに、後者のページが崩れてしまいました。なぜでしょうか。冗長なソースを見ていただき解決してくださった方に200pt差し上げます(先着)。


http://teto.chicappa.jp/mt4/
http://teto.chicappa.jp/mt4/2008/01/post_1.html

崩れたポイント、補足等はコメント欄に補記します。夜も遅いですが何卒よろしくお願いします!

回答の条件
  • 1人2回まで
  • 登録:2008/02/02 22:51:53
  • 終了:2008/02/03 17:39:22

ベストアンサー

id:stnet No.1

stnet回答回数804ベストアンサー獲得回数342008/02/03 09:51:20

ポイント200pt
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/fonts/#.css" />

の記述が影響しているようですね

上記1行を削除すれば問題ないかと思います

id:melondog

ありがとうございます。

確かにこの1行が悪さをしていたようです。

2008/02/03 17:36:48

その他の回答(1件)

id:stnet No.1

stnet回答回数804ベストアンサー獲得回数342008/02/03 09:51:20ここでベストアンサー

ポイント200pt
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/fonts/#.css" />

の記述が影響しているようですね

上記1行を削除すれば問題ないかと思います

id:melondog

ありがとうございます。

確かにこの1行が悪さをしていたようです。

2008/02/03 17:36:48
id:ElekiBrain No.2

ElekiBrain回答回数255ベストアンサー獲得回数152008/02/03 14:05:56

ポイント50pt

>#header内にposition:relative;で位置指定した<h1>要素の位置がずれた。

div#header h1 に

  text-align:right;

追加で解決します。


h1要素はブロック要素であり、ブロック要素はそのままだと親要素一杯にwidthを広げようとします。

width指定のないブロック要素でいくら

position:relative;

right:10;

としても常に親要素一杯に横の幅が広がるわけですから右には寄りません。

また、そもそも div#header に text-align:right; が入っていますから、この指定よりも margin-right:10px; 等で対処した方が良いかと思われます(positionはレイヤーの概念で要素を動かすため、別の要素のマージンを無視して動作する)。

Firefox では div#header に入っている text-align:right; がちゃんと利いているために、差異が生じなかったのだと思います。

なぜtext-align:center;の指定もないのにopera(safariでも)このような表示になったのか、についてですが、これは正直なところ分かりません。


なお、Opera、Safariのみ

position:relative;

right:10;

が利かなかった理由は、[ div#header h1 ]の指定はあったが、[ div#header h1 a ]にright関連の指定がなかった為、無視されたのでしょう(つまり、h1自体には[ position:relative; ]が適用されているはず)。





>トラックバックの投稿日時の上部に間隔が空いた。

以下で対処可能です。

p{
  margin:0;
  padding:0;
}

p要素は元々数ピクセルのマージンをとる性質があり、マージンをリセットしなければこのように隙間が空きます。今回は padding も開けられていたようですので、それも合わせて消します。




>#contentが#footerから浮き上がった

>#footer内の、p要素それぞれに間隔が空いた。

上記と同じ問題です。pタグのマージンによってフッタが押し出されたのです。

上記で自動的に対処できるはずです。

  • id:melondog
    WindowsのIE6、Firefox2.0で見た際には崩れは確認できませんでした。

    Movable Typeのテンプレートを弄っており、メインページ、エントリーアーカイブ(ウェブ記事)とテンプレートを弄った段階で、エントリーアーカイブ(ウェブ記事)のページのレイアウトが崩れてしまいました。

    崩れたポイントは
    ・#header内にposition:relative;で位置指定した<h1>要素の位置がずれた。
    ・トラックバックの投稿日時の上部に間隔が空いた。
    ・#contentが#footerから浮き上がった
    ・#footer内の、p要素それぞれに間隔が空いた。

    です。
  • id:melondog
    id:ElekiBrainさんにもコメントをしたはずが未送信でした、ごめんなさい。
    わざわざCSSを検証していただきありがとうございました。
    ElekiBrainさんの指摘された方法でも療法として有効でした。
    ただ全称セレクタでマージン・パディングともに0に指定したはずなのにそれが無視されていたのは、1 回答者:stnet さんの指摘した1行のコードにあったようです。
    とにかくありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません