解決済
違うブラウザで見るとレイアウトが崩れる
テンプレートはお月見(２カラム)を使っています。デフォルトでは左にあったサイドバーを、cssをいじって右に置き換えたのですが、FirefoxやSafariで見るとサイドバーは左のままで、しかもエントリー部分がサイドバーに食い込んでしまい読めなくなっています。
IEでは問題ないのですが…
どのように対処したらいいのかわからず困っています。
ご教授よろしくお願いします
回答(7)
7.
上記の回答でサイドバーが落ちたという事で、もう一度見直してみました。
この回答の段階で、本文の部分のカラムは
#content→width:570px
.blog→margin:20px 30px 20px 30px;（上 右 下 左）
.main→margin:10px 0 15px 17px;
と指定してありますので、
570-(30+30)-17=493
記事中で本当に使って良い横幅は493px未満となります。
3月24日分の記事で画像が3つ並んでいるのですが、これだけで横幅が500pxとなっています。
>>5 の回答でサイドバーが落ちる原因はこれです。
画像一つ一つは160pxなのですが、hspase="5"が入っていますので、
160x3+5x2+5x2=500
実際には（160+5x2）x3=510px のようです。
また、サイドバーは
#links→width:170px;
.side→padding:5px;（上下左右全て）
となっていますので、本当に使って良い横幅は160px未満となります。
バナーが168pxのものが使ってありますが、透明gifが入っていて、実際の横幅は169pxになっています。
サイドバー、メインカラムともに反転表示させて、出っ張っている部分がないか時々確認された方が良いかもしれません。
参考：
http://wiki.livedoor.jp/everydaydesign/d/%A5%B5%A5...
－－－－－－－－－－－－－
そういうわけで、メインカラムに520px、サイドバーに180pxの画像を入れて、月見さんの状態で、
potision:relative;にしてもサイドバーが落ちない状態にCSSを変更しました。
下記の項目をそれぞれ変更されてみて下さい。
#content{
width:560px;
float:left;
}
.blog{
margin:20px 10px 20px 10px;
}
.main{
font-size:16px;
line-height:135%;
margin:10px 0 15px 5px;
color:#666;
}
#links{
position:relative;
width:190px;
float:right;
background:#fff;
text-align:left;
margin:20px 5px 0px 0px;
padding:0px;
}
.side{
font-size:13px;
line-height:135%;
text-align:left;
margin:0 0 10px 0;
padding:5px;
}
もしこれでもサイドバーが落ちる場合は、申し訳ありませんが、3月24日の記事の画像のhspace="5"を抜いていただくか、画像を横3つに並べないで頂いた方が良いかもしれません。
1.
各ブラウザーによって、縦横の解釈が違い、どちらかと言えば Win + IE は、CSS に対してあいまいです。ですから多少の CSS の設定の間違いでも、融通を聞いてくれるのですが、Firefox、Safari、Netscape、などはきっちりとCSSを読みにきます。
これが Mac になるとなおさらです。Mac のSafari などはもう別物っていう感じです。
これを 100％ ではないですが、ある程度解消する方法は、閲覧しにきた方のブラウザーを自動判別して （ IE か、それ以外か ） 、適正な CSS を使用するよう、自動的に切り換えるようにします。
当然、CSS は 2枚 用意する必要がありますし、設定も、各ブラウザーを見ながら、2枚とも調整しなければなりません。私はこれを使用して、Win、Mac、ともに最新のブラウザーならば、ほとんど同じ表示で閲覧できるように現在なっています。
説明は私の書いた記事をご参考にして下さい。↓
http://blog.pekebatu.com/archives/50394326.html
2.
一つはIEとfirefoxとでは幅や高さの定義が
違うことに起因するものです。
widthの値を調節するとレイアウト崩れは戻ります。
もう一つは過去の質問で
CSSの全角スペースが影響して
レイアウトが崩れるケースがありました。
確認されてはいかがでしょうか？
確認方法
http:///あなたのblog/site.cssをダウンロードして
メモ帳で見てみる。
「・・・・」みたいな文字があると
そこは全角スペースでした。
これを取り除いて復帰する例もありました。
3.
こちらがかなりまとまっていますので参考にされて下さい。
http://mb.blog7.fc2.com/blog-entry-83.html
このページに書いてある意味がわかる場合は、CSSを変更して対応されて下さい。
意味がわからない場合は、残念ですが、他のデザインに変更するのが良いと思います。もしデザインを変更されたのがかなり昔なら、同じデザインを適応しなおすだけで改善する可能性もあります。（しばらく前にDTDドキュメントスイッチが導入され、デザインが見直されているみたいなので。）
ブログを提示していただいて解決する場合もありますが、CSSだけでなくHTMLの大幅な変更が必要な場合もあり、解決できない可能性もあります。
4.
企業とか仕事で使うのであれば、あまり凝ったことはせずに無難な路線でレイアウトしますしね。
ターゲットを絞るのであれば、それに特化して徹底的に作り込めばいいし。
それにしても、最近あちこちでやってる「Best of the ××」ってサイトの紹介は、特定OSの特定ブラウザーでしか正常に表示できないのがあって、「なんでこんなのが「BEST」なんだよ」って抗議したくなるよね。
5.
確かにIEでは右にサイドバーがあるのにFirefoxでは左にサイドバーがよっているという現象が確認できました。
CSSを拝見すると以下のようになっています。
#links{
position:absolute;
width:170px;
float:right;
background:#fff;
text-align:left;
margin-right:20px;
margin-top:20px;
padding:0px;
}
ためしにabsolute→relativeに変えてみました。
#links{
position:relative;
width:170px;
float:right;
background:#fff;
text-align:left;
margin-right:20px;
margin-top:20px;
padding:0px;
}
結果、当環境ではサイドバーは右に移動いたしました。
たぶん原因はposition:absolute;だと思われます。
色々な意見があるとは思いますが、私は全てのブラウザの違いを理解できれば、ひとつのCSSとHTMLでどのブラウザでも同じように表示されるサイトはできると思ってます。
それを目指して、勉強しています。
6.
web標準ブラウザ
↓
190px
IE
↓
170px
となり表示がズレます。
margin-leftを0にして他の要素でpaddingなりmarginなりで設定すると良いです。
ちなみに私のblogです。
http://blog.livedoor.jp/ryu_z/
Mac OS Xで作ってSafariでしか確認してませんが、win＋IEでも見れるはずです。
コメント(12)
みなさん、ありがとうございます。
私のブログは
http://blog.livedoor.jp/tsukiyo_no_sanpo/
です。
content と links の float を逆にしただけなのに、それすら正しく表示されないものなのですか？
細かい配置や表示の差を埋めたいわけではなく、ただそれだけのことなのに…
明日、義父の百箇日法要があるので、このスレで教えていただいたことを確認・勉強するのは週明けになってまいます。
お返事はそれからということでご了承ください
ブログの構成を修正する前にこちらを参考にして下さい。↓
http://blog.pekebatu.com/archives/50439689.html
＞ＡＱさん
そちらのサイトもよく参考にさせてもらってます。
サイドバーの位置を換えるにあたって、そちらと似たような解説をしている
http://myenglish.hp.infoseek.co.jp/livedoor.htm
http://blog.livedoor.jp/sui_vent/archives/4053221....
も熟読致しました。
私がいじったところが違うと仰りたいのでしょうか？
なぜそちらのリンク先をご紹介いただいたのか、その意図をはかりかねております。
私のやり方に間違いがあるなら、はっきり仰っていただけませんか？
>>5 リヴァイアさん
教えていただいたように書き換えてみました。
Firefoxではサイドバーが右に移動しましたが、IE6.0ではサイドバーが右下に落ちてしまいました。
ひとまずabsoluteに戻しています。
ブログの訪問者は圧倒的にIEが多いし私もふだんはIEなので、他のブラウザでのズレは捨て置いていたのですが、Safari使いのweb友が読めないと嘆いていたのでなんとかしたいと思いました。
左にあったものを右に置き換えるだけがこんなに困難だなんて…
HTMLもcssも相当いじっているし、できればテンプレートは今のが気に入っているので変えたくないのですが…どうてもダメならテンプレートの変更も視野に入れてみます
月見さん。
いい忘れましたが、position:relativeにして、あとはmarginとpaddingを調整するんですよ。必要があればwidthもいじります。できればなるべくmargin、paddingを小さくした方がいいです。
とりあえずこの場合はmargin-rightを0にして、5ずつくらい増やして行ってみてください。IEとFirefoxでほどほどに落ち着くところで決定してみてください。
月見さん。
>>5 の回答の時、そういえば私の環境では、IEでもFirefoxでもサイドバーは落ちていなかったような・・・と思って、もう一回やってみました。やっぱり月見さんと全く同じCSSでもサイドバーは落ちませんでした。
>>5 の回答のCSSでTUTAYAのバナーをはずしてみてください。ダメなときはしょうがないのでmargin-rightを削ってください。
＞#3 月見さん
コメント欄に書かれたことは通知が来ないので、今、気づきました。
>私がいじったところが違うと仰りたいのでしょうか？
>なぜそちらのリンク先をご紹介いただいたのか、その意図を
>はかりかねております。
>私のやり方に間違いがあるなら、はっきり仰っていただけませんか？
もしかして、私、怒られていますか？
ブログの構成図があったほうが、各部の調整や、組み立てに役立つだろうと思って、お教えしただけなんですが ・・・。
それでも何か気分を害したのですね？
言葉足らずで、すみませんでした。
>>6 ryu_zさん
たしかにwin＋IEでも拝見できました。
＞リヴァイアさん
バナーをはずしてもmargin-rightが10pxで右下に落ちてしまいます。
>>1 AQさんのやり方で挑戦してみようかと思ってます。
少し時間がかかりそうなので、成否のご報告も遅れるかと思いますが…
＞AQさん
「初心者の教えて君にズバリの回答を提示するのは面白くない、もっと自力で勉強してくれなきゃ」的な意味かと思っていました。
こちらにも少し誤解があったようです。申し訳ありません。
＞ 月見さん
誤解が解けて良かったです。
この記事のコメントのやりとり見て下さい。↓
http://blog.pekebatu.com/archives/50417443.html#co...
私・・・結構、優しいんですから (^^)
>>7 リヴァイアさん
写真などの大きさを考慮してカスタムしたつもりでしたが、まだまだ甘かったのですね…
わざわざありがとうございます。おかげで無事、Firefoxでも右にサイドバーがきました。
おそらくSafariでも大丈夫かと思います。あとでweb友に確認してもらいます。
ひとつ気がかりなのは、IEで見た場合、コメントとTBのツリー画像が消えてしまっていることです。Firefoxではきちんと表示されているのですが…
あとでアップロードし直してみます。それでもダメなら画像を変えるか記号にしてみます。
ここまでしていただいて贅沢を申すようですが…
やはり左右、とくに左の余白の少なさは気になります。
現行のcontainerの幅の中で調整していただいたのだと思いますが、できればmarginを変更前の余白と同じだけ欲しいので >>7 の数値を基本にして頑張ってみます。
根気よくお付き合いいただきまして、本当にありがとうございます
月夜さん。
解決して良かったです。
ツリー化の画像が消えた件に関しては？です。まずは、もう一度再設定されてみて下さい。
あとは、.blogtitleと.descriptionのpaddingの4番目の値を増やしたりすればOKかと思います。
お疲れさまでした。
月夜さん× → 月見さん○。
失礼しました（＾＾；
