Firefoxで表示が崩れる件について質問です。
SeeSaaブログをカスタマイズして作った
下記のサイトですが、サイド部分の表示が
Firefoxでみると左にずれてしまいます。
http://murray.seesaa.net/
サイド部分の左にマージンをいれると
今度はIEのほうで崩れてしまいます。
双方できれいに表示するにはどうすればよいでしょうか？
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
■
CSSの調整による改善策
cnzxcnz2006/10/28 04:09:10
2pt
簡単な改善策はCSSによる調整かと思います。
私なりに元のCSSを調節してみました。
（変更点赤字。なるべく変更を少なくしてあります。）
#contents {
width: 800px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 10px;
padding: 0px;
}
#side {
background-color: #dee4cf;
width: 25%;
float: right;
margin-left: 5px;
padding: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
}
#main {
float: right;
width: 69%;
border: 1px solid #999999;
background-color: #FFFFFF;
margin-right: 10px;
}
これで幾分改善されるかと思います。
別の方法としましては他の回答にあるようにCSSハックを使うといいかもしれません。
ここでは「IE以外に適用される」ハックを利用します。
以下に示すように#contentsのすぐ下に
*>#contents {
padding-left: 30px;
}
を追加して下さい、
#contents {
width: 800px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
padding: 0px;
}
*>#contents {
padding-left: 30px;
}
のような感じで。このとき#mainのmargin-rightは20pxにすると調度良いのではないかと思われます。
以上2通りの提案でした。
すばらしいです（泣）
kandora2006/10/31 10:42:01
お返事が遅くなってすみません
ちゃんと表示されました（泣）
ほんとうにありがとうございます
自分ではどうにも修正することができなかったので、
助かりました。
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。
これ以上回答リクエストを送信することはできません。制限について
8
8
簡単な改善策はCSSによる調整かと思います。
私なりに元のCSSを調節してみました。
（変更点赤字。なるべく変更を少なくしてあります。）
#contents {
width: 800px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 10px;
padding: 0px;
}
#side {
background-color: #dee4cf;
width: 25%;
float: right;
margin-left: 5px;
padding: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
}
#main {
float: right;
width: 69%;
border: 1px solid #999999;
background-color: #FFFFFF;
margin-right: 10px;
}
これで幾分改善されるかと思います。
別の方法としましては他の回答にあるようにCSSハックを使うといいかもしれません。
ここでは「IE以外に適用される」ハックを利用します。
以下に示すように#contentsのすぐ下に
*>#contents {
padding-left: 30px;
}
を追加して下さい、
#contents {
width: 800px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
padding: 0px;
}
*>#contents {
padding-left: 30px;
}
のような感じで。このとき#mainのmargin-rightは20pxにすると調度良いのではないかと思われます。
以上2通りの提案でした。