ジメジメする梅雨のお悩み、一挙解決! >>

IE7以上、FireFox3以上の対応でコーディングをしています。

下記のようなレイアウトでIE7でだけ<div id="main">のカラムの中のテーブルだけがおちてしまします。

レイアウトとしては、全体には幅指定をせず、サイドナビゲーションにのみ幅指定をしています。
と言うのも、mainの中のテーブルの大きさが各ページ違い、かなり大きなサイズのテーブルになるため、大きくなるテーブルはブラウザからわざとはみ出させるためです。
幅の小さなテーブルがあるページはブラウザ内に収まり、幅の大きなテーブルはブラウザからはみ出します。
幅指定をしていないので、navi main 両方にフロートをかけることはせず、naviにのみフロートをかけ、mainには左側にマージンを入れています。
これでFFとIE8では思い通りに表示されています。
IE7だけブラウザ幅を超えるテーブルがあるページのテーブルのみが下におちてしまいます。

---------------------------------------------

<body>
<div id="all">
<div id="header">ヘッダー</div>
<div id="wrap" class="C">
<div id="navi">ナビゲーション</div>

<div id="main">
<table>
<thead>
<th>あかさたな</th>
<th>あかさたな</th>
</thead>

<tbody>
<td>はまやらわ</td>
<td>はまやらわ</td>
</tbody>

</table>
</div>
</div>
</div>

CSS-------------------

#all{
min-width:850px;
}
#wrap{
padding:20px 20px;
margin:0 0;
}
#navi{
float:left;
width:190px;
padding:0;
}
#main{
margin:0 0 0 200px; 
}

どうすればIE7でもIE8と同じ表示にできるか、テーブルが落ちてしまわないかわかる方はいらっしゃいませんでしょうか?

よろしくお願いします。

A 回答 (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>
    • good
    • 0

カラム落ちとか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>
    • good
    • 0

ふむ、ちゃんと表示されてますか?


#navi{width:190px;}となっていて#main{margin:0 0 0 200px;}となっています。
ちゃんと幅指定してますよね?
しかも入れ子の方が幅広い…marginは当然margin+項目です。
今回幅190pxの箱の中に左側にmargin200px+項目が入っています。
私としては当然下に落ちてもしょうがない気がしますがいかがですか?
ちょっとCSS認識不足で変な事言っているかもしれませんが、
普通に考えるとこうなります。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QIE7でfloat:leftが効かない問題

表題の件でご質問がございます。

現在
<ul>
<li><img src="XXX" ></li>
<li><img src="XXX" ></li>
<li><img src="XXX" ></li>
</ul>

<div>YYYYY</div>
<div>YYYYY</div>
<div>YYYYY</div>

の二通りで<li>と<div>にclassを設定し、
.list {float:left;}
と設定しているのですが
全て縦に並んでしまいます。

chrome safari IE8,9 firefoxでは全て狙い通り水平型リストになっているのですが
IE7のみうまく行きません。


どなたかご教示戴ければ幸いでございます。

Aベストアンサー

HTMLをIE7で標準モードで起動するように書き換えてみましょう。
いまどき、transitinalは使わないほうが良いでしょう。
DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )
 もちろん文法チェックも忘れないように。

「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」

Qfloatでカラム落ちを防ぎたい

少し長いですがお付き合いよろしくお願いいたします。

<style type="text/css"><!--

body {
text-align:center;
}

#all {
width:730px;
margin-left:auto;
margin-right:auto;;
text-align:left;
background-color:#33ffcc}

#left{width:50%;
float:left;}

#right{width:50%;
float:left;}

--></style>

</head>

<body>

<div id="all">

<h1>見出し1</h1>

<div id="left">

<h2>AAA</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>BBB</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>CCC</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

</div>

<div id="right">

<h2>AAA</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>BBB</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>CCC</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>DDD</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>EEE</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

</div>

</div>

このように記述するとFirefoxではallで指定した背景色がh1にしか反映されず、left、rightの高さのずれている部分には反映されません。

この記述から、スタイルシートのrightに何も指定しないようにすると、allに指定した背景色はきちんと反映されるんですが、今度はleftよりrightのコンテンツが多いためカラム落ちしてしまいます。

どのように、記述すれば背景色がうまく反映され、カラム落ちを起こさずに済むのでしょうか?

条件はFirefox,Opera,IE6でほぼ同じレイアウトが表現でき、tableやoverflowは使わない事です。

少し長いですがお付き合いよろしくお願いいたします。

<style type="text/css"><!--

body {
text-align:center;
}

#all {
width:730px;
margin-left:auto;
margin-right:auto;;
text-align:left;
background-color:#33ffcc}

#left{width:50%;
float:left;}

#right{width:50%;
float:left;}

--></style>

</head>

<body>

<div id="all">

<h1>見出し1</h1>

<div id="left">

<h2>AAA</h2>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<h2>BBB</h2>...続きを読む

Aベストアンサー

最後の </div> の手前に

<br style="clear: both;">
もしくは、
<div style="clear: both;"><br></div>
や、
<div style="clear: both;">&emsp;</div>
等を入れる。


人気Q&Aランキング

おすすめ情報