MacとWinでのサイト表示の違いとレイアウト崩れの原因

このQ&Aのポイント
  • MacとWinでサイトの表示が異なる現象が発生しています。
  • WinのIEでの観覧時に、トップページ以外のページのレイアウトが崩れています。
  • レイアウトはCSSでdiv分けしていて、基本的にどのページも同じCSSを適用しているはずですが、原因は何でしょうか?
回答を見る
  • ベストアンサー

MacではOKなのにWinで見るとトップ以外のページのレイアウトが崩れているのは何故?

お世話になります。現在サイトを作成しているのですが、何故かMacの表示とWinの表示が異なっていてWinで見るとレイアウトが崩れてしまっているという状況です。MacはSafari・FireFox・IEなどで確認しましたが普通にレイアウトが崩れることなく表示されました。ところがwinのIEで観覧してみるとトップページのみまともに表示され、他のページはレイアウトが崩れているのです。レイアウトはCSSでdiv分けして組み込んでいて基本どのページも同じCSSを適用しているはずなのに何故かトップページ以外のページが崩れます。これは一体どうしてなのでしょうか?教えていただけないでしょうか? div#header { width:800px; margin-left:auto; margin-right:auto; } div#container { width:800px; padding-bottom:5px; margin-left:auto; margin-right:auto; } div#contens { width:800px; margin-left:auto; margin-right:auto; } div#leftmenu { width:170px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#centermenu { width:630px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } contents(800px)の中にleftmenu(170px)とcentermenu(630px)があるのですがこのcentermenuがleftmenuの隣に収まって欲しいところ下段に表示されます。

質問者が選んだベストアンサー

  • ベストアンサー
  • Muller3
  • ベストアンサー率81% (800/979)
回答No.1

margin: autoを使っているということは、標準準拠モードでしょうか。 以下XHTMLなら、ですが。 HTMLにxml宣言は使っていますか。 同じCSSファイルを参照しているのにIEのトップページ以外の見映えが違うということなら、トップページ以外ページのxml宣言の問題ということはないでしょうか。 http://blog.drry.jp/2006/02/25/ie7-b2-xhtml 関係ありませんが div#centermenuのfloat:left; って、いるんでしょうか?

関連するQ&A

  • CSSでのレイアウトが崩れてしまうんです。

    お世話になります。CSSビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px(contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。)/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう?素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか? ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }

  • CSSでブラウザごとにレイアウトが崩れたりします。

    はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■    ■=ヘッダー □□●●●●    □=メニュー □□●●●●    ●=コンテンツ(中身)1 □□○○○○    ○=コンテンツ(中身)2 □□○○○○    ▲=フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー(□)とコンテンツ(○+●)の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー(□)の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ(○+●)部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE7のみでして、IE6やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか? body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • CSSで文字が流れ込んでしまいます

    CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto;    margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto;    margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>

    • ベストアンサー
    • HTML
  • CSSでページ作成、Firefoxでうまく表示できません

    ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート(左:メニュー、右:内容)のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header"> ヘッダー </div> <div class="left"> メニュー </div> <div class="right"> 内容 </div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • divで作成したレイアウトに背景画像を付けたいが付けられない

    divでレイアウト作り背景画像を入れたいのですが背景画像が思うように適用されません。 以下のようなサイトのように、作成したレイアウトのコンテンツ部分(真ん中白い背景色部分)に背景画像をつけたいのですが、色々やってみたのですが背景画像が適用されません。 参考サイト:http://www.realbit.net/rb_results/index.html 私のソースコードは以下です。 HTML <body> <div id="header"> <p>ヘッダー</p> <p>あああ</p> </div> <div id="container"> <div id="incontainer"> <div id="main"> <p>メイン</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> <div id="leftMenu"> <p>左メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="rightMenu"> <p>右メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="footer"> <p>フッター</p> <p>あああ</p> <p>あああ</p> </div> </body> CSS #header { background-color: #FF3; width: 920px; margin-right: auto; margin-left: auto; } #container { background-color: #F00; width: 920px; margin-right: auto; margin-left: auto; } #incontainer { float: left; width: 720px; } #main { float: right; width: 520px; background-color: #900; } #leftMenu { background-color: #00F; float: left; width: 180px; margin-left: 20px; } #rightMenu { float: right; width: 180px; background-color: #FF9; margin-right: 20px; } #footer { background-color: #F0F; clear: both; width: 920px; margin-right: auto; margin-left: auto; } 参考サイトのようにコンテンツ部分に背景画像を入れたい、私の場合container部分にフォトショップで作成した背景画像をいれたいのですが、まずは実験的に、上記のように背景画像を入れる前に赤い背景色を入れて見ましたが赤い背景が出てきません。背景画像もためしに入れてみましたが適用されません。 なにが間違っているのでしょうか?

    • ベストアンサー
    • HTML
  • div入れ子の背景画像

    【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout">  <div id="menu">メニュー</div>  <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか? 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • firefoxで見るとdiv背景画像がスクロールで消えてしまいます

    http://www.geocities.jp/testac2007/ bodyに「top_bg.gif」という背景画像指定をした上で更にdivを重ね、そのdiv内に「side_860.gif」という背景画像を指定しています。 ieだと意図した通りに表示されるのですが、 FirefoxやNetscapeで確認すると、表示されているページより下部のスクロール以下の背景画像が表示されません。 何とか同症状についてネットで検索し試行錯誤してみたのですが、解決に至りませんでしたのでこちらでヘルプさせていただきました。皆さんのお知恵を拝借いただきたいです。 ■■■HTMLの概要■■■ <body> <div id="side_bg"> <div id="outline"> <div id="A01">○○○</div> <div id="A02"> <div class="A02_left">○○○</div> <div class="A02_right">○○○</div> <br class="c-both"> </div> <div id="B01">○○○</div> </div> </div> </body> ■■■CSSの概要■■■ body { margin:0px auto; background-image:url(images/top_bg.gif); } #side_bg { width:860px; height:100%; margin:0 auto; background:#ffffff url(images/side_860.gif); overflow:visible; } #outline { width:830px; margin:0 auto; background-color:#FFFFFF; } .c-both { clear:both;} #A01{ width:830px; margin:15px 0px 4px 0px; overflow: auto; } #A02{ width:830px; margin:0px 0px 4px 0px; overflow: auto; } .A02_left{ width:304px; float:left; } .A02_right{ width:526px; float:right; margin-top:4px; } #B01{ width:730px; margin:20px 50px; }

    • ベストアンサー
    • CSS
  • トップページの横幅を画面いっぱいに表示させたい。

    トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/xxx.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }

    • 締切済み
    • CSS
  • CSSの崩れについて

    CSSにて横2段組のボックスを組んだところ、右側の内容がなぜか左側のボックスの下にも表示されてしまいます。 **html** <!-- out_wrap --> <div id="out_wrap"> <!-- inner_wrap --> <div id="inner_wrap"> <!-- left_Contents --> <div id="left_Contents"> <p>AAAA</p> </div><!-- /left_Contents --> <!-- right_Contents --> <div id="right_Contents"> <p>A</p> </div><!-- /right_Contents --> </div><!-- inner_wrap --> </div><!-- out_wrap --> **css** @charset 'Shift_JIS'; body{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; text-align : center; background : #333333; color:#4f4d45; } #out_wrap{ margin-left : auto; margin-right : auto; width : 980px; padding-top : 20px; background-color : #FFFFFF; } #inner_wrap{ margin-left : 10px; margin-right : 10px; width : 960px; } #left_Contents{ width : 650px; float : left; margin-right :10px ; line-height : 200%; text-align : left; background-color : #000000; } #right_Contents{ width : 300px; float : right; line-height : 200%; text-align : left; background-color : #999999; } ************************************************************* 右ボックスの A と打った文字が左側下にも表示されてしまいます。 marginの計算もあっていると思うのですが、しかもIE6でこのような現象です。Firefox最新版では大丈夫です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssを使って分割したページのレイアウトが崩れてしまいます

    はじめまして。 見よう見真似でcssでページの分割を始めたのですが、ウインドウのサイズを変えるとレイアウトが崩れてしまって、何度手直ししても直らず暗礁に乗り上げてしまった為、質問させて下さい。 幅780で設計しているページ内にコンテンツ(左)とサイドバー(右)で左右に分割表示している部分があります。 コンテンツは幅500、サイドバーは幅260でそれぞれ高さは変動する可能性がある為、指定はしておりません。 ブラウザのウインドウ幅を小さくするとサイドバーがコンテンツの下に回り込んでしまうのでサイドバーをposition:absoluteで固定してみたのですが、今度はウインドウ幅を大きくすると下段のテーブルや最下段に自動でくっついてくる広告がサイドバーに重なってしまうことになり、解決策が見出せずにいます。 ウインドウのサイズを変更してもレイアウトが崩れないようになる手段をご存知の方がおりましたらご教授頂ければと思います。 また、本来やりたかったレイアウトがありまして、コンテンツとサイドバーを左右で分けつつ、更に両方を幅780の一つのボックスに収めることは可能でしょうか? こちらも手段をご存知の方がおりましたら合わせてご教授下さい。 以下ソース抜粋 htmlファイル↓ <body> 割愛 <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left"></td></tr> </tbody> </table> <div id="content">コンテンツ</div> <div id="sidebar">サイドバー</div> <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left"></td></tr> </tbody> </table> </body> 読み込んでいる外部cssファイル↓ <style type="text/css"> #container{width:780px;text-align:left;margin:0px auto;} #header{width:780px;margin:0px 0px 15px 0px;} #content{float:left;width:500px;padding:10px 2px 2px 8px;} #sidebar{float:center;width:260px;padding:2px 2px 10px 8px;} #footer{clear:both;width:770px;margin:15px 5px 15px 5px;} </style> div{  font-size: 10pt;  margin: 1%;  padding: 2%;  line-height: 120%;  border-style: double;  border-color: #F5F5F5;  background-image:url("背景画像") }

    • ベストアンサー
    • HTML