- ベストアンサー
IE7でテーブルが落ちる問題の解決方法
- IE7で<div id='main'>内のテーブルが下に落ちてしまうという問題について、解決方法を教えてください。
- IE8と同じ表示にするためには、特定のCSSプロパティを設定する必要があります。
- テーブルがブラウザ幅を超える場合の対応方法についても教えてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
HTMLの間違いもありますがそれはおいといて・・ floatは、そもそもの目的が画像などの周囲にテキストを回りこませるためのプロパティ値で、このようなブロックの配置に使うのはおかしいです。 たとえばメインコンテントが文章でその中に右や左に文章を流し込まれる画像をいれた文章で、しかも見出しなどでclearするような場合、どのようにデザインしますか？？ IEの古いタイプはブロックの内寸のサイズのとり方にバグがありますから、すべてのブラウザに対して微妙な配置はできませんが、このような場合fixedかabsoluteを使います。 [IE5～6]と[IE7～9]で位置が微妙に変わる。 fixed ・・・ナビゲーションがウィンドウ高さよりも常に小さい場合。 absolute・・ナビゲーションがウィンドウ幅よりも高くなる場合 【サンプル】 ★タブは全角スペースに置き換えてある。 ★#navi{}は二種類。。いずれかをコメントアウトすること <!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>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> html,body{margin:0;padding:0;} #top{ min-width:850px; background-color:yellow; } #wrap{ padding:20px; margin:0 0 0 20px; background-color:green; position:relative; } /* #navi{ position:absolute; top:20px; left:20px; width:190px; background-color:skyblue; } */ #navi{ position: fixed; /*ここから */ top:40px; left:40px; /* ここまで */ width:190px; background-color:skyblue; } #main{ margin:0 0 0 200px; background-color:white; } </style> </head> <body> <div id="top"> <div id="header">ヘッダー</div> <div id="wrap" class="C"> <div id="navi">ナビゲーション</div> <div id="main"> <table> <thead> <tr> <th>あかさたな</th> <th>あかさたな</th> </tr> </thead> <tbody> <tr> <td>はまやらわはまやらわはまやらわはまやらわ</td> <td>はまやらわ</td> </tr> </tbody> </table> </div> </div> </div> </html>
その他の回答 (2)
- naokita
- ベストアンサー率57% (1008/1745)
カラム落ちとかIE7とか言う問題より、 そのCSSには、全角スペースが入り込んでますね・・・ div#main{ overflow: auto; width: 600px;} とか floatじゃなく、positionの方が良いのかも。 ----------------- #navi{ position: relative;} #navi div{ position: absolute; top: 5px; left: 5px; width:190px;} #navi ul,#navi p{ margin: 0; padding: 0;} <div id="navi"><div> <ul><li><a href="#">1</a></li><li><a href="#">2</a></li></ul> <p>333333333</p><p>44444444</p> </div></div>
- abacabu
- ベストアンサー率37% (250/663)
ふむ、ちゃんと表示されてますか？ #navi{width:190px;}となっていて#main{margin:0 0 0 200px;}となっています。 ちゃんと幅指定してますよね？ しかも入れ子の方が幅広い…marginは当然margin＋項目です。 今回幅１９０ｐｘの箱の中に左側にmargin200px＋項目が入っています。 私としては当然下に落ちてもしょうがない気がしますがいかがですか？ ちょっとCSS認識不足で変な事言っているかもしれませんが、 普通に考えるとこうなります。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
