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

Firefoxで表示が崩れる件について質問です。

SeeSaaブログをカスタマイズして作った
下記のサイトですが、サイド部分の表示が
Firefoxでみると左にずれてしまいます。

http://murray.seesaa.net/

サイド部分の左にマージンをいれると
今度はIEのほうで崩れてしまいます。

双方できれいに表示するにはどうすればよいでしょうか?


●質問者: kandora
●カテゴリ:ウェブ制作
✍キーワード:firefox IE Seesaa カスタマイズ サイト
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

[1]CSSハックを使うのはどうでしょう DLDB_Master

IEにのみ適用したいCSSを設定する方法があります。

* html .hogehoge

{

/*スタイルを記述*/

}

のように、「* html」からはじめると、IEにのみ適用されるスタイルになります。

なので、たとえば

.hoge

{

/*スタイルを記述*/

}

* html .hoge

{

/*IEのスタイルを記述*/

}

最初にFireFoxを念頭に置いたスタイルを書いてやって、そのあとで「* html」で始まる同じスタイルを書くと、FireFoxでは最初の指定しか効かないので、うまく使えばレンダリングの差異を埋められます。

ボクなぞは実際に仕事でもよく使います。

経験上、いろいろな理由で完全には払拭できない場合もありますが、1px程度なら妥協していいでしょうね。


[2]CSSの調整による改善策 cnzxcnz

簡単な改善策は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通りの提案でした。


[3]>2 すばらしいです(泣) kandora

お返事が遅くなってすみません

ちゃんと表示されました(泣)

ほんとうにありがとうございます

自分ではどうにも修正することができなかったので、

助かりました。


[4]>1 ありがとうございます! kandora

CSSハックを勉強しないと・・・と思いながらも、難しくて

取り組めていませんでした。

便利ですよねぇ

教えていただき、ありがとうございます。

これからしっかり勉強します。

関連質問


●質問をもっと探す●



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