IE6で動かないコンテンツ

このQ&Aのポイント
  • ホームページをアップしましたが、IE6でdiv「field」内のコンテンツが正しく動作しません。
  • field内のコンテンツが固定されてスライドしない問題が発生しています。
  • ヘッダーや次へのボタンまでは正常に動作しているが、field内のコンテンツが高さを保ったままスライドしない問題です。
回答を見る
  • ベストアンサー

IE6で動かないコンテンツ

教えてください。 http://chikusa-eetoko.jp/ ホームページをアップしましたが IE6で div「field」内のコンテンツのみ、まるで positionプロパティをかけたように固定されて動きません。 --------------------- <div id="container"> <!-- コンテンツエリア --> <div id="page"> <div id="header"> <!-- コンテンツ -->・・・・・動く </div><!-- /#header --> <div id="field"> <div id="main"> <!-- コンテンツ -->・・・・・スライドしない </div><!-- /#main --> <div id="second"> <!-- コンテンツ -->・・・・・スライドしない </div><!-- /#second --> <div id="shot"> <!-- コンテンツ -->・・・・・スライドしない </div><!-- /#shot --> <div class="next"><a href="news/index.html"><img src="img/next-navy.gif" width="90" height="22" alt="次ページへ"></a></div>・・・・・動く </div><!-- /#field --> </div><!-- /#page --> </div><!-- /#container --> --------------------- ヘッダーと次へのボタンまでは field 内コンテンツの高さを保ったまま空でスライドします。 どうかご教授ください。よろしくお願いします

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

  • ベストアンサー
  • tracer
  • ベストアンサー率41% (255/621)
回答No.1

検証せずに憶測で書きますが、IE6にposition:fixedの機能はないので、CSS/HTMLレベルの問題ではないと思います。 おそらく、というかほぼ間違いなく、javascriptでしょう。それもIEにだけ条件指定しているiepingfix.jsがもっとも怪しいです。 個人的な尺度ですが、IE6に関しては、きっぱり対応しないか、対応するならIE6の機能だけ(javascriptを使わない)で表現できるWebサイトにするべきだと思います。HTML5/CSS3の表現が増え、それを一生懸命javascriptでIE6対応しているサイトが増えていますが、正直、それは対応しているのではなく、表示ズレよりももっとひどい状況、「固まって動かない」状況を生み出しています。今回の件も、それに近いですよね^^;

meah1835
質問者

お礼

回答ありがとうございます。 >iepingfix.jsがもっとも怪しいです やはり、 一度だけ、なぜだかiepingfix.jsが効いていない状態で表示された時のみ正常に動いた事がありました。 IE6、無視はしたいのですが・・・ >ほぼ間違いなく、javascript ですね ページを開いただけではスクロールしない事といい再編成が必要のようですね ありがとうございました、これで踏ん切りがつきました。

関連するQ&A

  • 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
  • サイドバーとコンテンツの高さをそろえるには

    こんにちは。 自分のホームページを作っているのですが、 サイドバー(navi)とコンテンツの高さを合わせられず、困っています。 どなたか詳しい方、教えて頂けないでしょうか。 <div id="container"> <div id="contents"></div> <div id="navi"></div> </div> として、floatでコンテンツを右、naviを左に配置。 ボーダーは、containerの左右に実線 navi の右に実線をしていますが、 naviがcontentよりも短いと、図の左のように線がかけてしまいます。 背景色は白で、ボーダーで区別をしたいのですが、 navi と、コンテンツの高さを自動で合わせるにはどうすればいいでしょうか。 検索で調べてみると、背景色を利用したものやJavaを使ったモノなど様々で、 僕の利用用途に合わないので困っています。 どうぞよろしくお願いします。

    • ベストアンサー
    • HTML
  • IE6にてずれる

    こんにちは html超初心者です。 headとcontentsを隙間なく表示したいのですが、IEではコンテンツがずれてしまい うまく表示されません。 コードを記載します。 ================================== --------html------------ <div id="all"> <div id="head"> <h1><a href="../index.html"><img src="img/logo.gif"></a></h1> <div id="guide"> <a href="../index.html">ホーム</a> <a href="index.html">プロフィール</a> <a href="#">リンク</a></div> <p class="clear-both">&nbsp;</p> </div> <div id="contents"> コンテンツ内容 </div> </div> --------css------------ body,a,div,p,h1,h2,h3,ul,li,img,dl,dd,dt,ol{ margin:0; padding:0; text-decoration: none; } #all{ width:650px; } .clear-both{ font-size:0; height:0px; clear:both; line-height:0%; } #head{ width:650px; background:url('../img/main_img.gif') no-repeat; height:90px; } #guide{ float:right; margin:60px 0px 0px 0px; } #contents{ background:url('../../common/img/back_img.gif') repeat-y ; } ================================== headにてボックスを二つ挿入し、それらをそれぞれfloat:left・rightで左右に表示しています。 その下に<p class="clear-both">&nbsp;</p> を挿入し、cssにてそのクラスに対し、 clear:both; line-height:0%; 等を入力しています。 IEにて確認すると、その下のコンテンツが 右にずれてしまっています。 line-height:0%;がcssに記載されていなければ ずれずに表示されますが、headとcontentsの間に 隙間ができてしまいます。 line-height:0%を記載していてもfirefox・operaではcontentsはずれず、隙間もありません。 どなたか教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 開始タグと終了タグについて

    開始タグと終了タグについて ものすごく初歩的な質問で失礼します。 <div id="container"> <div id="header"> </div> <div id="menu"> </div> <div class="main-top-img"> </div> <div class="main-middle-img"> <div id="main-contents"> <div class="text"> <h2 class="title"></h2> <p class="text"></p> <h3 class="subtitle"> <p class="text"></p> </div> </div> <div class="main-bottom-img"> </div> <div id="footer"> </div> </div> などいのように開始タグと終了タグの間に、他の多くの<div>要素がある場合、どこがその要素の終了タグなのか分からなくなります。 それぞれの開始タグが、それぞれの終了タグと対応するのは、どのようなルールのもとに決定されているのですか??

    • ベストアンサー
    • HTML
  • CSSの三段組みレイアウトについて教えて下さい。。

    CSSレイアウト初心者ですが、CSSの作成段組みを作る時に <div id="container"> <div id="header"> </div><!--/header--> <div id="contents"> <div id="left_bar"> </div><!--/left_bar--> <div id="main"> </div><!--/main--> </div><!--/contents--> <div id="right_bar"> </div><!--/right_bar--> <div id="footer"> </div><!--/footer--> </div><!--/container--> と三段組固定レイアウトを作成したいのですが、 一度目は何回やり直してもfloatの設定でleft_bar,mainの横並びが上手くいかずに、 contentsの中でleft_bar,mainが縦並びになってしまい何回何が原因か様々なサイトで考えを模索してソースを直しても何故かleft_bar,main がcontentsの中で何回書き直しても縦並びになりもう一度一からCSSを組み直してみると、 どうした訳かようやくcontentsの中でleft_bar,mainが横並びになってくれました。 これは一体根本的に何が原因で横並びにさせるつもりが、縦にボックスが並んでしまうのでしょうか? CSSのfloatの概念からハックかなと思いハック親ボックスにハックをかけてみてでも全く関係ないみたいでしたし、親ボックスにピクセルを指定していないからかと思い親ボックスにピクセルで指定しても何故か縦並び?! CSSをもう一度書きなすことで意図したレイアウトになると言う事は一番は何が原因していると見られるのでしょうか?

    • 締切済み
    • CSS
  • CSSでの2段組レイアウトでdiv#containerを導入する理由

    CSSでの2段組レイアウトでdiv#containerを導入する理由 CSSを使って2段組みレイアウトを構成する場合、次のようにdiv#containerを導入したマークアップをよく目にします。 <body> <div id="container"> <div id="header"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div> </body> また、div#containerを導入せずにbody要素の直下に#header, #mainなどの領域を設けている場合も目にします。 body要素直下ではなく、div#containerを導入するのはどのような理由からなのでしょうか?

  • IEのdivの間の隙間

    こんにちは。 dreamweavercs5使っています。 headerとnavi間に隙間ができて困っています。 記述としては <div id="header"> .... </div> <div id="navi"> <p><a href=...html><img src=...></a> <p><a href=...html><img src=...></a>・・・ </div> というようにnaviの左上から画像を右に詰めています。 googlechrome10ではheaderとnavi間に隙間なく表示されますが IE8だと1?ピクセル隙間ができます。 marginは上下0にしましたがそれでも変わりません。 imgのcssに img{vertical-align:bottom;} と入れても治りません。 CSSレイアウトではきちんと繋がっているので問題ないのですが・・・

  • ADOBE DW 5.5 ヘッダとコンテンツの隙間

    現在、独学でADOBE DREAM WEAVER CS 5.5でwebサイトを作成していますが、 headerとcontentの間に10pixcelほどの隙間ができてしまいます。「デザイン」ビューには 表示されないのですが、「ライブ」ビューやIE9やchromeでも隙間ができてしまっています。 これを防ぐ方法はなにかありませんでしょうか?コードは下記となります。 【HTML】--------------------------------------------------------- <html> <body> <div id="container"> <div id="header"> <img src="a.png" width="1000" height="150"> </div><!-- /#header --> <div id="content"> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div><!-- /#content --> </div><!-- /#container --> </body> </html> 【CSS】--------------------------------------------------------- body{ background-color: #CCC; font: 16px/24px 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif; color: #000; } #container { margin:0 auto; width: 1000px; } #header { margin: 0 auto; padding: 0 auto; } #content { width:1000px; margin: 0 auto; padding: 0 20; background-color: #666; } よろしくお願いします。

  • 【CSS】positionの親子関係について

    あるボックスを親として、そこにコンテンツを配置したいと思っています。 flaot は使わず、posiotion で位置を指定する想定で、下記のスクリプトを書きました。 (該当箇所以外の部分は省きます) << CSS >> #container { position: relative; } #main { position: absolute; top: 10px; } #side { position: absolute; top: 10px; right: 10px; } << HTML >> <div id="container"> <p><img src="container.png" width="700" height="400"></p> <div id="contents"> <p><img src="main.png" width="550" height="650" id="main"></p> <p><img src="side.png" width="100" height="650" id="side"></p> </div> </div> これを実行すると、main は container に合わせて移動がされる(親子関係になっている)のですが、side のみ、ウィンドウサイズに合わせて移動をしてしまいます。 relative と absolute で親子関係を作る、という考え方自体は合っていると思うのですが、何か法則など(親子関係は一対一でなければならない等)あるのでしょうか。 CSSの勉強を始めたばかりのため、お詳しい方にご解説をお願いしたいです。。

    • ベストアンサー
    • CSS
  • コンテンツの配置について

    Yahoo!のようにコンテンツ全体を中央によせ、さらに、 それぞれのボックスの表示位置を縦横で指定したいのですが 以下のようなソースではうまくいきません。 対処方法をご教示下さい。 よろしくお願いします。 <STYLE TYPE="text/css"> <!-- #main{ position:relative; top:10px; text-align:center; width:100%; } #contentsA{ text-align:center; width:800px; } #contentsB{ position:relative; hight:200px; } --> </STYLE> <TITLE></TITLE> </HEAD> <BODY> <DIV id="main"> <DIV id="contentsA"> <DIV id="contentsB"> <IMG src="image3.gif" border="0" width="50" height="50"> <IMG src="image2.gif" border="0" width="50" height="50"> <IMG src="image1.gif" border="0" width="50" height="50"> </DIV> </DIV> </DIV> </BODY>

    • ベストアンサー
    • HTML

専門家に質問してみよう