人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

●質問者: melondog
●カテゴリ:ウェブ制作
✍キーワード:CSS HTML opera コメント欄 ソース
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● stnet
●200ポイント ベストアンサー
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/fonts/#.css" />

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

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

◎質問者からの返答

ありがとうございます。

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


2 ● ElekiBrain
●50ポイント

>#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タグのマージンによってフッタが押し出されたのです。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ