IE8でサイドバーのレイアウトが崩れる場合の対処法

前へ 次へ
このQ&Aのポイント
  • IE8よりも古いバージョンでのみレイアウトが崩れて困っています。
  • IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。
  • 全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。どうにか解決する方法はありませんでしょうか？
回答を見る
  • ベストアンサー

IE8でサイドバーのレイアウトが崩れる場合の対処法

CSSについての質問です。 IE8よりも古いバージョンでのみレイアウトが崩れて困っています。 簡単な抜粋ですが、以下のような感じでfloatを使ってレイアウトを作成しています。 [HTML] ---------------- <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> </div> ---------------- [CSS] ---------------- #main{ float:left; width:620px; } #sidebar{ float:right; width:300px; } #footer{ clear:both; } ---------------- IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。 しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 ---------------- <div id="main"> <div id="sidebar"> </div> </div> ---------------- なので、全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。 どうにか解決する方法はありませんでしょうか？ 文章だと伝わりくいかもしれませんが、よろしくお願いいたします。

  • CSS
  • 回答数3
  • ありがとう数5

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

ブラウザが互換モードで動作しているからです。 1999年のHTML4.01の勧告以来『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』とされてきたのに、他の仕様で作っている、他の仕様であるにしてもブラウザが互換モードで動作するように指定しているからでしょう。 ※以前のIEは、他のブラウザとの差別化、ユーザーの囲い込み、他のブラウザを排除するために独自の解釈をしていました。そのためにIEでしか見れないウェブサイトをたくさん作ってしまいました。 　ところが、世の中Windowsばかりじゃない・・・。そのため世の中がウェブ標準になっても他の世界と解離していった。 　そのために、IEにはウェブ標準モードと、IEの過去の仕様にあわせた互換モードが存在します。標準モードで動作させるためにはDOCTYPE宣言を HTML4.01strictの場合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML4.01transitinalの場合 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> と書かないとなりません。 　⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) ※そのようなidの使い方は、とてもたくさん見かけますがまずいです。sidebarじゃ何が書かれているか分からないし、将来下に回そうとした時に困るでしょう。しかもidじゃ一箇所しか使えない!!。headerもsidebarもfooterもひとつのHTML内に何度も登場する可能性がある。リンクターゲットやjavasciptのターゲットなどにidを使いましょう。またその名称も後から内容が分かるように・・ ※floatはこの様な場合使用しません。フォントサイズが変わったりすると崩れたり、そして何よりも本文中でfloatが自在に使えなくなります。また、floatさせるために文書の順番を変えるなど文書構造が制約を受けます。 ※サンプルは、リキッドです。480px～920px程度まで伸縮しても崩れない ※IE6以降は中央配置IE5,IE5.5では左による。 ※IE7以前は、min-height,height:100%に対応していないが崩れることはない ※firefox,Opera,Chrome,Safari,IE--Linux版も--で標準で表示される。 ★Another HTML Lint HTML5 - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) 　でチェック済み ★タブは＿に置換してあるので戻すこと。 [サンプル] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>IE8でサイドバーのレイアウトが崩れる場合の対処法 </title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- p{line-height:1.6em;text-indent:1em;margin:0;} div.header,div.section,div.footer{ width:90%;min-width:470px;max-width:900px; margin:0 auto; padding:5px; } div.section{ position:relative; min-height:200px; } div.section h2,div.section p,div.section div.section{ margin:0 31% 0 0; width:auto; } div.section div.aside{ width:30%;height:100%; position:absolute; top:0;right:0; } /* 参考のため色づけ */ body{background-color:gray;} div.header{background-color:yellow;} div.section{background-color:silver;} div.footer{background-color:lime;} div.aside{background-color:aqua;} div.section div.section{background-color:white;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>IE8でサイドバーのレイアウトが崩れる場合の対処法 </h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>章見出し</h2> ＿＿<p>class名は、HTML5の新しい要素名を参考にしてある。</p> ＿＿<div class="section"> ＿＿＿<h3>項見出し</h3> ＿＿＿<p>記事だよ</p> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>本文と関係ない記事</h3> ＿＿＿<p>と言う意味でasideとclass名をつけてある。</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

midorinodonchan
質問者

お礼

非常に詳細な回答ありがとうございます。おっしゃる通り互換表示がオンになっていると表示が崩れていました。 色々と試した結果、結局divの閉じ忘れでしたが、ご回答によって非常に勉強になりました。 ありがとうございました。

その他の回答 (2)

回答No.3

>しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 こうなることが原因だと思いますので、その現象の直接の原因であるHTMLコードの不備を直せば、期待通り表示されるのではないでしょうか。 <div>の閉じ忘れなどのミスをチェックしてみてください。

midorinodonchan
質問者

お礼

回答ありがとうございます。 おっしゃる通り<div>の閉じ忘れでした。こんな初歩的なミスで質問してしまい申し訳ないです。

回答No.1

> 文章だと伝わりくいかもしれませんが、よろしくお願いいたします この一行入れるぐらいだったら、コピペで現象を確認できるようにソース全部貼って！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSレイアウト(2列型)に関して

    お世話になります。2列の左列がメインで右列がサイドバーというCSSレイアウトに関してご質問します。 以下のような構造のCSSレイアウトを作成しました。 body | |-- #wrapper | | | |-- #content | | | | | |-- #main | | | | | |-- #sidebar body { background: yellow; } #wrapper { width:700px; background: white; } #content { width: 700px; background: white; } #main { float: left; width: 500px; background: white; } #sidebar { float: right; width: 200px; background: blue; } ※padding: 0;margin: 0;を実際には全てに追加してあります。 ----- 以下HTMLファイル ----- <body> <div id="wrapper"> <div id="content"> <div id="main"> <p> ・・・・・・ </p> </div> <div id="sidebar"> <p> ・・・・・・・ </p> </div> </div> </div> </body> 上記においてIE6ではメイン(#main)の高さがサイドバー(#sidebar)の高さより高い場合、サイドバーの下部は#contentで指定した白になります。しかしFirefoxではサイドバーの下の部分がbody要素に指定したyellowになってしまいます。※Firefox1.07で試しています。 メイン(#main)やサイドバー(#sidebar)の高さを指定していないためと考えますが、メイン及びサイドバー共に高さを可変にするため固定値を設定したくない場合は、FirefoxでIEのように#contentの背景色(白)を反映するにはどうすればよいのでしょうか。 質問が長くなりましたが、手がかりでもつかめればと思っています。どうぞ宜しくお願いします。

  • IE6のレイアウト崩れ

    お世話になります。 下記の内容でレイアウトをしております。 firefox3.08ではほぼ思い通りですが、 IE6では、menuがmainの左下に入り込んでしまい、 mainが真ん中より少し左にずれてしまうのです。 解決策を教えてください。 情報が足らないようでしたら、ご連絡下さい、宜しくお願い致します。 body { font-size : medium; } div#container { width : 730px; } div#header { font-size : 12px; width : 725px; } div#navi { width : 725px; clear : both; font-size : 12px; } .topicpath{ clear : both; width : 725px; margin : 3px 0 3px 0; } div#main{ float : right; width : 540px; } div#menu{ float : left; width : 170px; font-size : 12px; } div#footer { width : 725px; clear : both; font-size : 75%; } <div id="container"> <div id="header"> </div> <div id="navi"> </div> <div class="topicpath"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div>

    • ベストアンサー
    • HTML
  • CSSでの背景色の出し方でつまりました。

    独学で学んでいる初心者です。 HTML <link rel="stylesheet" href="hp.css" type="text/css"> <div id="container"> <div id="header">ヘッダー</div> <div id="main">メイン</div> 　　　　　　<div id="sidebar">サイドバー</div> <div id="footer">フッター</div> </div> CSS #container{ width:940px; overflow:hidden; } #main{ width:620px; float:left; color:black; } #sidebar{ width:320px; float:right; background:green; } #footer{ clear:both color:red; } 簡単なものにしてみても出なかったので、 なぜ出ないのか教えていただければと思います。 ブラウザはオペラです。 サイドバーのグリーンしかつきません。 過去の似たような質問をいくつかみて overflow:hidden; や .clearfix:after { content: ""; display: block; clear: both; } を入れてみてもダメでした。 お願い致します。

    • ベストアンサー
    • CSS
  • IEだとdivが横に並びません

    CSSでレイアウトをしているのですが、横にふたつdivを並べたいのに、右側のdivが下にまわってしまいます。 http://oshiete1.goo.ne.jp/qa3576983.html こちらでIEでは左の余白が倍になってしまうと知り、display:inlineを指定しましたが、解決しません。 何が原因でしょうか。 HTML: <div id="main"> <div id="mainl"> </div> <div id="mainr"> </div> </div> CSS: #main { width: 900px; } #mainl { float: left; height: 317px; width: 324px; display: inline; padding-top: 26px; padding-right: 16px; padding-bottom: 0px; padding-left: 40px; } #mainr { float: right; height: 317px; width: 480px; padding-top: 26px; padding-right: 40px; }

    • 締切済み
    • CSS
  • CSSに関して教えてください。

    CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。

    • ベストアンサー
    • HTML
  • <div>タグでサイドバーを作るときの幅の指定方法

    全体を囲むdivの中にサイドバーとメインコンテンツ用のdivを入れたいと思っています。 <div id="allContents" style="width:100%;"> 　<div id="sideBar" style="float:left; width:200px;"></div> 　<div id="main" style="float:right;"></div> </div> で、このときに、右側に表示される#main部分の幅を「残り全部」にしたいのですが、 widthに何を指定したら良いのでしょうか？ サイドバー部分が200px固定で、残りのメイン部分の幅はブラウザの右端までにしたいのです・・。 （Javascriptで#main部分の長さを取ろうと思っているので、中に何も入っていなくても 　divの大きさが一杯までなるようにしたいのです・・） ご教授よろしくお願いします。

    • ベストアンサー
    • HTML
  • 2カラムのレイアウト

    2カラムのレイアウトにおいて、HTMLの記述部分において。 【例1】コンテナーの「★外」に、フッターがある場合と。 ・「コンテナー(コンテンツ+サイドバー)」 ・「フッター」 【例2】コンテナーの「★中」に、フッターがある場合。 ・「コンテナー(コンテンツ+サイドバー+フッター)」 があるように思いますが? ★どっちでもいいんでしょうか? (どっちも、同じレイアウトになるんでしょうか?　そんな感じがします。)　 ^^ HTML/CSS　初心者なもので。。。よろしくです。　^^ ---------------------------------------------------------------- 【例1】 <div id="container"> 　　<div id="contents">　本文 </div>　 　　<div id="sidebar">　サイド部分 </div> </div>　<!--container部分終わり--> 　<div id="footer"> 　　<p>著作権</p> 　</div> <!--footer部分終わり--> 【例2】 <div id="container"> 　　<div id="contents">　本文 </div>　 　　<div id="sidebar">　サイド部分 </div> 　<div id="footer"> 　　<p>著作権</p> 　</div> <!--footer部分終わり--> </div>　<!--container部分終わり-->

    • ベストアンサー
    • HTML
  • インラインフレームを使用するとIE6でレイアウトが崩れます。

    インラインフレームを使用するとIE6でレイアウトが崩れます。 2カラム、左メニューのwebページを作っているのですが、 インラインフレームを使用したページのみ、IE6でレイアウト崩れがおこります。 css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #box { width:800px; } #main { width: 605px; margin: 5px; float: right; } #menu { width:180px; margin: 5px; float: left; } iframe.member { width: 595px; height: 700px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <body> 　・ 　・ 　・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <iframe src="***.html" frameborder="0" class="member"></iframe> </div> <div id="menu"> メニュー </div> <!-- #boxここまで --></div> 　・ 　・ 　・ </body> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ boxのなかにmain（右回り込み）とmenu（左回り込み）で２カラムにしています。 mainのなかに、mainの幅と同等となるインラインフレームを配置したいのですが 上記のようにするとmenuが回り込まず、mainの左下に表示されます。 iframe.memberを使用せず、ほぼ同等のdiv（下記#contents）を切り テキストのページをつくった場合はきれいに回り込みます。 css＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ #contents { padding: 15px; width: 565px; border-left: solid 5px #000000; border-right: solid 5px #000000; border-bottom: solid 5px #000000; margin-top: 0px; margin-right: 5px; } HTML＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ <body> 　・ 　・ 　・ <div id="box"> <div id="main"> <img src="***.gif" title="見出し画像"> <div id="contents"> テキスト テキスト </div> <div id="menu"> メニュー </div> 　・ 　・ 　・ </body> ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ 一度インラインフレームを設置したページからインラインフレームを削除しても divの幅をせばめてみるなどのテストをしても カラム落ち？は直らないという謎の状況です・・・ 他のサイトを同じようなCSSで作ったときには、 インラインフレームを使用してもIE6で問題なく表示されたので 今回のエラー？　バグ？　がなぜおこっているのか見当もつきません。 状況を上手く説明出来てないかもしれませんが、 アドバイス等ありましたらお願いします。

  • フッターの位置をスタイルシートで

    ＨＴＭＬ＆ＣＳＳの勉強を始めたばかりです。 ヘッダー、内容３カラム組み、フッターという形にしたいのですが、どうしてもフッターが最下部に来てくれません。 フッターを３カラムの下に来させるには下記のほかに何が必要なのでしょうか。本とにらめっこしながらプロパティを足したり引いたりはしているのですが。 かなり基本的なところだと思いますがお願いいたします。 ＨＴＭＬ－－－－－－ <div id="header"> あいうえお </div> <div id="main"> <div id="mainleft"> かきくけこ </div> <div id="maincenter"> さしすせそ<br> まみむめも<br> や　ゆ　よ </div> <div id="mainright"> なにぬねの </div> </div> <div id="footer"> たちつてと </div> ＣＳＳ－－－－－－ div#header{width:600px;} div#main{width:600px;} div#mainleft{top:40px;width:100px;float:left; position:absolute ;} div#maincenter{top:40px;width:400px;float:left; position:absolute ;left:105px;} div#mainright{top:40px;width:100px;float:left; position: absolute;left:510px;} div#footer{width:600px;position: relative;}

    • ベストアンサー
    • HTML
  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する