IE6で段落ちする問題の対策方法

前へ 次へ
このQ&Aのポイント
  • IE6で段落ちする問題が発生した場合、CSSリキッドレイアウトやウィンドウ幅の調整など、いくつかの対策方法があります。
  • IE6で段落ちしないためには、IE6専用のスタイルシートを作成することも有効です。また、floatプロパティを利用して要素の配置を行う方法もあります。
  • 皆さんのお知恵を拝借したいですが、IE6のバグを修正するには詳しい知識と経験が必要です。専門家やフォーラムでの相談をおすすめします。
回答を見る
  • ベストアンサー

IE6で段落ち

CSSリキッドレイアウトのページを作成したいと思っています。 FirefoxやIE7では段落ちしないのですが、 IE6でウィンドウ幅を縮めたときに左ナビが段落ちしてしまいます。 IE6でも段落ちさせないためにはどうしたら良いものでしょうか。 何か足りない点があるのだと思いますが、 お知恵を拝借できないでしょうか。 お手数ですが、よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSSレイアウトテスト</title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div id="frame_wrapper"> <div id="frame_column-content"> <div id="frame_content"> コンテンツ部分コンテンツ部分コンテンツ部分 コンテンツ部分コンテンツ部分コンテンツ部分 コンテンツ部分コンテンツ部分コンテンツ部分 コンテンツ部分コンテンツ部分コンテンツ部分 コンテンツ部分コンテンツ部分コンテンツ部分 コンテンツ部分コンテンツ部分コンテンツ部分 <div class="visualClear"></div> </div><!-- end of content --> </div><!-- end of column-content --> <div class="frame_portlet"> 左ナビ左ナビ左ナビ 左ナビ左ナビ左ナビ 左ナビ左ナビ左ナビ 左ナビ左ナビ左ナビ </div><!-- end of frame_portlet --> </div><!-- end of frame_wrapper --> </body></html> main.css: #frame_wrapper { width: 99%; margin: 0; padding: 0; } #frame_column-content { width: 99%; float: right; margin: 0 0 0 -20em; } * html #frame_column-content { margin-right:-19.2px; } #frame_content { margin: 0 0 0 20em; background: white; } body { margin: 0; padding: 0; } .visualClear { clear: both; } .frame_portlet { width: 19em; overflow: hidden; }

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

  • ベストアンサー
  • tsunami02
  • ベストアンサー率23% (16/68)
回答No.1

.frame_portletにかかっているoverflowが原因だと思います。 overflowは対応のブラウザは少なかったと記憶しています。（CSS2.0では）しかもIE6では完全対応していません。

hideboo11
質問者

お礼

tsunami02さん ありがとうございます！ overflow: hidden; を消したらうまく行きました。 大感謝です！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • 3カラムのサイトでfloatができない

    ３カラムのホームページを作っているのですが、 中央と右のカラムがどうしてもfloatできません。。 左カラムをfloat:leftにして、中央と右のカラムを#contentsBoxで囲ってfloat:rightさせています 【ＨＴＭＬ】 <div id="wrapper_2"><!--div id wrapper_2 START--> <div id="contentsBox"><!--div id contentsBox START--> <div id="560"><!--div id 560 START--> 中央カラム 　　　　</div><!--div id 560 END--> <div id="175"><!--div id 175 START--> 　　　　右カラム </div><!--div id 175 END--> </div><!--div id contentsBox END--> <div id="205"><!--div id 205 START--> 　　　　左カラム </div><!--div id 205 END--> </div><!--div id Wrapper_2 END--> 【ＣＳＳ】 /*+++wrapper_2++++++++++++++++++++++++++*/ #wrapper_2 { width: 984px; background-color:#fff; padding: 8px; margin: 10px auto 10px auto; overflow: hidden; } /*+++contentsBox++++++++++++++++++++++++++*/ #contentsBox { width: 757px; float: right; } #contentsBox:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; } /*+++左カラム+++++++++++++++++++++++++++++*/ #205{ width: 205px; margin: 0 22px 0 0; float: left; } /*+++中カラム+++++++++++++++++++++++++++++*/ #560{ width: 560px; float: left; } /*+++右カラム+++++++++++++++++++++++++++++*/ #175{ width: 175px; float: right; margin-left: 22px; } まだ勉強中なので、初歩的なミスなのかもしれませんが、 どうしても中央カラムの下に右カラムがきてしまいます。 （ドリームウィーバーで見たら、望み通りの配置になっているのですが、ブラウザでチェックすると、中央カラムの下に右カラムがきてしまいます） アドバイスいただければ嬉しいです。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。

    趣味でＨＰを作成しております。 一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、 ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、 ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。 現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。 つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> 　メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。 しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、 メニューが右になってしまいます。 これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？ １週間くらい試行錯誤したのですが、できませんでした。 お詳しい方教えてください。

    • ベストアンサー
    • HTML
  • XHTML+CSSにおいてIE6での原因不明のバグ？に困っています

    最近一大決心をし、テーブルでデザインしていたページをCSSでデザインしなおしております。 今IE6にでのみ、おかしな挙動が起こっていて昨日からもう5時間近く直せないでいます。どなたか原因と対処方を教えていただけませんでしょうか？ やりたいこと：枠の中に2段組で左にサイドバー、右にメインの要素を入れようとしています。メインの要素はブログでいうエントリーのように似たような要素が繰り返されます。 事象：IE6でのみエントリーの繰り返しの最後の要素が通常の表示とは別に全体の背景のように表示される。 該当部のソース：一応コメント部もそのまま載せます （XHTML） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <title>あいうえお</title> <style type="text/css"> @import url("xxxxxx.css"); </style> </head> <body> <div id="box"> <div id="centerbox"><!-- 角丸コンテナセンター要素（コンテンツ部） --> <div id="contents"> <!-- ここからコンテンツ ---> <!-- ここからサイドコンテナ --> <div id="side"> <div class="subnavi"> <h2>さいどなび</h2> <p>サイドナビ要素</p> </div><!-- / end of subnavi--> 　 <!--　/　サイドコンテナここまで　--> </div><!-- / end of side--> <!-- ここからメインコンテナ --> <div id="main"> <h2>コンテンツタイトル</h2> <div class="column"> <h3>コンテンツサブタイトル</h3> <p>コンテンツはここはひふへほ書きくけ子たち</p> <p>コンテンツはここはひふへほ書きくけ子たちつ</p> </div><!-- / end of column--> <div class="column"> <h3>コンテンツサブタイトル２</h3> <p>ここは繰り返しのてすと</p> <p>コンテンツはここはひふへほ書きくけ子たちつて</p> </div><!-- / end of column--> <!-- / ここまでメインコンテナ---> </div><!-- / end of main--> <!-- /ここまでコンテンツ --> </div><!-- / end of contents--> <!-- ここまで角丸コンテナセンター要素 --> </div><!-- end of centerbox --> </div> <!-- / end of box--> </body> （CSS） #box { width: 800px; margin: 0px; padding: 0px; height: auto; clear: both; } #box #centerbox { vertical-align:top; margin: 0px; padding: 0px; clear: both; width: 790px; border-right: 5px solid #990000; border-left: 5px solid #990000; height: auto; border-top-width: 0px; border-bottom-width: 0px; } #contents { margin: 0px 5px 5px; padding: 0px; height: 500px; width: 780px; clear: both; } #contents #side { height: auto; width: 150px; margin: 0px; padding: 0px; float: left; } #contents #side .subnavi { border: thin dotted #00FFFF; margin: 0px; padding: 0px; } #contents #side .subnavi h2 { color: #CC0000; background: #FF66FF; padding: 5px; margin: 0px; font-size: large; } #contents #main { padding: 0px; float: right; height: auto; width: 630px; margin: 0px; } #contents #main h2 { background: #66CCFF; border-left: 10px solid #0000FF; margin: 0px 10px 10px; font-size: x-large; font-weight: bold; padding: 5px 10px; } #contents #main .column { margin: 15px; padding: 10px; border: thin dashed #0000FF; clear: both; } #contents #main .column h3 { background: #99FFFF; border-left: 10px solid #0066FF; margin: 0px; font-size: large; font-weight: bold; padding: 5px; } #contents #main .column p { font-size: medium; clear: both; margin: 5px; padding: 0px; } 縦は一番上から始まり、横は上記HTML<p>サイドナビ要素</p>のサとイの間辺りからcolumn の最後の要素が背景のように出ます。文字は最後の1文字しか見えません。（おそらくその上に他の要素があるため見えないのではないかと思いますが・・・） おそらくCSSに問題があると思うのですが、全く解らないです。

    • ベストアンサー
    • HTML
  • スタイルシートの記述方法に関して。

    スタイルシートで、基本的なデザインは一通り出来ると思っています。 実は今サンプルのスタイルシートを修正しています。 スタイルシートの記述方法に関して、質問があります。 サンプルのスタイルシートの記述方法ですが、要素の記述にて上位の要素を全て記述し、最終的な要素を記載しています。 例として 一番外側の要素を：#wrapper ヘッダー：#header コンテンツ：#content メインコンテンツ：#main サイドコンテンツ：#side とします。 自分の場合であれば、スタイルシート内の記述は div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#header { width: 480px; margin: 0px auto; padding: 0px; } div#content { width: 480px; margin: 0px; padding: 0px; } div#main { float: left; width: 300px; margin: 0px; padding: 0px; } div#side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述していましたが、サンプルでは以下の通りに記述されています。 div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#wrapper #header { width: 480px; margin: 0px auto; padding: 0px; } div#wrapper #content #main { float: left; width: 300px; margin: 0px; padding: 0px; } div#wrapper #content #side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述されています。 上記の記述に、技術的に有利になる点は有るのでしょうか、単に CSS の記述を判りやすくしているだけのように思えます。 上記の記述方法は、一見判りづらいと思いますが、記述している要素が確実に判ると思います。 ただ、その反面 CSS のソースが肥大化します。 上記の記述方法に、他にメリット、デメリットがあるのかアドバイスを頂ければ幸いです。 ちなみに、参考にさせて頂いてる CSS のソースは海外で作られたソースになります。 海外では一般的に使われている記述方法になるのでしょうか。

    • ベストアンサー
    • CSS
  • 3カラムレイアウトで隙間

    下記のように３カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper"> 　　<div id="left">左メニュー</div> 　　<div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間（↓の部分）に3pxほどの隙間があいてしまいます 　　↓　　　↓ [左]　[中央]　[右] 隙間なくぴったりつけるにはどうすればいいでしょうか。 どうぞよろしくおねがいいたします。

    • ベストアンサー
    • HTML
  • 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
  • CSSで親ボックスの背景画像を設定してもNN7.01で表示されない

    例えば、下記のように記述して「wrapper」ボックスで 「bodybg.gif」という画像を垂直方向に並べたいのですが、IE6ではうまく表示されますが、NN7.01だとヘッダー部分以外のボックスに背景画像が表示されません(><;) /* html * / <div id="wrapper"> <div id="header"></div>　/* ヘッダー　*/ <div id="pagebody">　/* pagebody内2カラム　*/ <div id="content"></div> /* 右寄せ　*/ <div id="leftside"></div>　/* 左寄せ　*/ </div> </div> /* css * / #wrapper { width: 600px; margin-left: auto; margin-right: auto; margin:0px; background: url(../img/bodybg.gif) repeat-y; padding: 0px; } CSSで毎回つまづくところですが、どうにもこうにも対処方法が見つかりません(T_T) どなたか力をかしていただけないでしょうか・・・

    • ベストアンサー
    • CSS
  • IE7のfloatの回り込みがうまくきません

    お疲れ様です。いつもお世話になっております。 FF2、Opera、IE7という3つのブラウザでコーディングしたHTMLをチェックしている状態です。 下記に問題のHTMLとCSSを記述します。 <div id="common_border"> <div id="common_border_side"> <div id="common_border_top"></div> <div id="l_navi"> <ul> <li id="l_navi_1"><a href="">ナビ1</a></li> <li id="l_navi_2"><a href="">ナビ2</a></li> <li id="l_navi_3"><a href="">ナビ3</a></li> </ul> </div> <div id="explain"> <h1>説明</h1> <dl> <dt>内容1</dt> <dd>説明が入ります。</dd> </dl> <dl> <dt>内容2</dt> <dd>説明が入ります。</dd> </dl> </div> <div id="common_border_bottom"></div> </div> </div> </div> common_borderのtop,bottomは丸角の枠画像です。 sideには1pxの背景画像が入ります。 /*---------丸角の枠線を表示するCSS--------------*/ #wrapper #common_border{ width:736px; margin:10px 82px; padding:0; } #wrapper #common_border_top{ background:url(../img/common_border_top.jpg) no-repeat; height:10px; padding:0; margin:0; } #wrapper #common_border_side{ background:url(../img/common_border_back.jpg) repeat-y; margin:0; padding:0; } #wrapper #common_border_bottom{ background:url(../img/common_border_bottom.jpg) no-repeat; height:20px; padding:0; margin:0; } /*----------------左のナビゲーション------------------*/ #wrapper #l_navi{ float:left; margin:0; padding:0; width:200px; } #wrapper #l_navi ul{ list-style:none; padding:0 20px; margin:25px 0; } #wrapper #l_navi ul li{ margin:0 0 5px; } /*-------------説明部分-----------------*/ h1{ text-indent:-9999px; background:url(../img/productexplain.jpg) no-repeat; margin:20px 0 10px 180px; } p{ margin:0; padding:0; } #explain{ text-align:left; width:506px; margin:0 35px 30px 15px; padding:0; } #explain dl dt{ color:#8E2E00; } 差し障りのないようところどころ端折ってます。 出来上がりは適当ですが、下記のようになります 　丸角の枠線画像（上） 　ナビ1 h1の説明 　ナビ2　説明1 　ナビ3　説明2 　丸角の枠線画像（下） ナビをfloat:leftにしていて、explainにはfloatをかけていません。 explainをfloatすると、なぜか丸角の枠線画像（下）の下にナビ、explainともに表示されてしまうためです。 なので、ナビにfloatをかけた状態で、そのナビを内包するかたちでexplainに左のmarginを210pxとり、 explainのwidthを680pxほどにすることで、OperaとFFはきれいに表示されました。 ボーダーを表示させると 　　丸角枠線画像（上） ┏━━━━━━━━━━━ ┃┏━━━┓　h1 ┃┃ナビ１┃　説明 と、強制的な感じです。 ところが、IE7だとこれがうまくいかず、つまり、floatされたナビを内包できずに、widthが足りず、 丸角の枠736px-（ナビ200px+説明680px）でマイナスになり、説明がナビの下に来てしまうような状態です。 なんとか足りるようにピクセルを合わせると、IE7ではきれいに見えるが、Opera,FFで崩れてしまいます。 IE7だけのハックなどがあるようなのですが、何分まだ慣れてなくて、自力で解決するのは難しそうです。 上記のソースを見て何か助言いただくことができたら、お願いします。

    • ベストアンサー
    • HTML
  • 3カラム IE 右落ち

    現在幅固定３カラムでサイトを作っているのですが、私のマック環境（safari&Firefox）ではちゃんとレイアウトが整うのにwindowsのIE 7,6,5ではどれも右のボックスが左下に落ちてしまいます。 CSSはもともと #container { margin:0px auto; width:1000px; text-align:left; } .wrapper { width:800px; float:left; } /*　左　*/ .left { float: right; width:200px; } /*　中央　*/ .main { float: right; width:600px; } /*　右　*/ .right { float: left; width:200px; } /*　フッター　*/ .footer { width:100%; clear:left; } で、これに左右にmargin-left:15px;などを入れていたので、それが原因かと思いdisplay: inline;を足してみたり外してみたのですが変わらず、 左右のボックスの中に<div></div>で囲ったフレーム素材の中にカテゴリーなどをいれているので、そこにmarginやpaddingが発生しているので今度は上記のwidthをちょっと変えてみました。 現在wrapperは780px　左190px　中央580px、右181pxとしてかなり右に余裕を持たせて、尚かつ右で使用していたフレーム素材を全て取り外し１行文字のみだけで試してみたのですが、全然右に上がってきてくれません。 またwidthに余裕を持たせてborderを使ってそれぞれの位置を確認したのですが、右にはかなりのスペースがあいているのに、右に上がってきてくれないのです。 一体何がいけないのでしょうか？？ どうかお力をお貸しください。宜しくお願い致します。

  • CSSでIEとFirefoxでの表示の違い

    IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常（希望通り）に表示されるようにするには どのような記述にすれば良いのでしょうか？ 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する