ＩＥでテーブルが寄ってしまうのはなぜ？対応方法を教えてください
- ＩＥ以外のブラウザなら、中のテーブルが中央に表示されるのにＩＥは左側に赤い中のテーブルが寄ってしまいます。
- CSSのスタイルを修正して、中のテーブルを中央に表示させることができます。
- 具体的な対応方法としては、テーブルの親要素に対してmargin: 0 auto;を指定することで中央に配置することができます。
- ベストアンサー
ＩＥだと左側に赤い中のテーブルが寄ってしまう
http://oshiete.coneco.net/qa8437703.html こちらで質問してご回答いただいてタグを修正したのですが、 なぜかIE以外のブラウザなら、中のテーブルが中央に表示されるのに ＩＥは左側に赤い中のテーブルが寄ってしまいます。 対応方法を教えてください。 コードは <html> <head> <title>test</title> <style type="text/css"> #zentai{ width: 850px; margin: 0 auto; text-align: left; background-color:red; } </style> </head> <body> <div id="zentai"> test </div> </body> </html> です。
- GRIDKWBKMYD
- お礼率98% (59/60)
- HTML
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
すでに回答しましたが・・それでIE7以降は改善されるはずですけど・・ ⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) ・DOCTYPE宣言がない!! これが最初に忠告されるはず・・ ★ちゃんとDOCTYPE宣言をしましょう。 そのときに、必ずstrictにして置きます。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 IEは、かって他のブラウザを蹴落とすために独自仕様でした(そのためIE用に作られたページ以外は崩れる) 古いIE用を表示させる互換モー時を持っているた、IEに対して標準モードで動作させるように宣言する必要がある。 対症療法な対処ではなく、きちんと対処しないとブラウザ間の誤差に随所で悩まされる ★body直下にtableはありえません。 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ tableは二次元データをあらわすもので、配置やデザインのためではありません。 ※これは、最低限守らないと!!! [サンプル] ★HTML4.01strict + CSS2.1 ★タブは＿に置換してあるので戻す。 <!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:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- table[summary="サンプル"]{ width: 90%; margin: 0 auto; background-color:red; border:solid 10px blue; border-radius:15px; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<table summary="サンプル"> ＿＿＿<tr> ＿＿＿＿<td>セル</td> ＿＿＿</tr> ＿＿</table> ＿</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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
その他の回答 (1)
- kita-neko
- ベストアンサー率25% (1/4)
IEのバージョンにもよりますが、margin:autoが使えないことがあります。 以下の方法であればIEでも中央に寄せれます。 <html> <head> <title>test</title> <style type="text/css"> body{ width:100%; text-align:center; } #zentai{ width: 850px; margin: 0 auto; text-align: left; background-color:red; } </style> </head> <body> <div id="zentai"> test </div> </body> </html>
関連するQ&A
- IE以外は色が付かない なぜ？
<html> <head> <title>test</title> <style type="text/css"> } #zentai{ width: 850px; margin: 0 auto; text-align: left; background-color:red; } </style> </head> <body> <div id="zentai"> test <div> </body> </html> このコードを実行するとＩＥだと、色が赤くなるのですが スレイプニルやグーグルのブラウザだと何も色が付きません。 なぜでしょうか？
- ベストアンサー
- HTML
- IEで中央寄せにしたい
<html> <head> <title>test</title> <style type="text/css"> <!-- body {margin-right : auto; margin-left : auto; width : 50%} div#center { text-align: center; } --> </style> </head> <body> <DIV style=background:red;> test</DIV> </body> </html> これでスレイプニルだとちゃんと中央寄せになるのですが ＩＥ９だと横画面いっぱいに広がってしまいます。 ＩＥでも指定した幅で表示させる方法はありますか？
- ベストアンサー
- HTML
- IEと同じようにFirefoxでもテーブルが表示されるには？
head内にスクロール非表示のタグを入れています。 http://aomi1111.sakura.ne.jp/temp/in/i106/index.htmlのような感じでノーフレームです。 IE7、IE6ではテーブルが画面の上から下まで表示されテーブル内でスクロールが出来ますが、Firefoxで見るとテーブルが画面下に飛び抜けてしまいテーブル内のスクロールが出ず、スクロール非表示にしてるので下が見れなくなってしまいます。上のサイトのように表示するにはどうすれば良いでしょうか？このテンプレートをノーフレームにしたいです。自分なりに(初心者です)いじくりすぎて原形がなくなりました。必要なさそうな(？)タグは載せていません。 ■CSS■ body,td,th{ font-size:70%; color:#444; font-family:Georgia,Verdana,Osaka,'MS P Gothic'; font-weight:normal; margin:0px;padding:0px; background:#fff url() repeat fixed; } body{text-align:center;} table{margin:auto;height:100%;} #table2{ filter:alpha(opacity=100); width:551px;height:100%; background:#fff; padding:0px 10px 0px 10px; overflow:auto; } #table3{ filter:alpha(opacity=90); background:#fff url() no-repeat; padding:0px; width:220px;height:100%; } ■top.html■ <head> <style type="text/css"> <!-- body{overflow:hidden;} --> </style> </head> <body> <★table cellspacing="0"> <tr><td> <div id="table2">左の本文</div> </td><td> <div id="table3">右メニュー</div> </td></tr> </table> </body> ★のtableを消してcssの#table内にfloat:left;margin-left:120px;等入れるとFirefoxでも表示されますが、その場合table2、table3を真ん中にこさせる方法が解りません。。。どなたか解る方がいましたらよろしくお願い致します。
- 締切済み
- HTML
- fixedで作ったフロートメニューを中央に配置するには
浮かせたaをbの位置に表示させたいのですが、aは左上に固定されてしまいます。 IE7では上手くいくのですが、FF3では思うように行きません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>TEST</title> <style> html,body{margin:0;padding:0;width:100%;height:100%;} </style> </head> <body> <div style="max-width:780px;width:100%;margin:0px auto;text-align:center;border:solid 1px #AAAAFF;color:#AAAAFF;position:fixed;">a</div> <div style="max-width:780px;width:100%;margin:0px auto;text-align:center;border:solid 1px #FFAAAA;color:#FFAAAA;">b</div> </body> </html>
- 締切済み
- HTML
- ブラウザの横幅イコール100％ではない？
以下のコーディングで、各色、1行になる筈なのですが、上手くいかず困っています。根本的に何かを間違えているようで、思ったようになりません。何を勘違いしているのか、どうすればいいのかを教えてください。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>無題ドキュメント</title> <style type="text/css"> body{margin:0;padding:0;width:600px;} h1{margin:0 1%;width:98%;background:#ffbbbb;} div{float:left;padding:2em;margin:0 1%;} .test2{width:48%;background:#ffdddd;} .test3{width:31.3%;background:#ddffdd;} .test4{width:23%;background:#ddddff;} .test1{width:98%;background:#ffffcc;} </style> </head> <body> <p>body{margin:0;padding:0;width:100%;}</p> <h1>見出し1 h1{margin:0 1%;width:98%;}</h1> <div style="margin:0;width:100%;background:#eeeeee;height:30px;padding:1em;">div 共通{float:left;padding:2em;margin:0 1%;}</div> <div class="test2">div.test2{width:48%;赤}</div> <div class="test2">.test2（左右1％のマージンと48％のコンテンツで50％）が2個で100％のつもり</div> <div class="test3">div.test3{width:31.3%;緑}</div> <div class="test3">.test3（左右1％のマージンと31.3％のコンテンツで33.3％）が3個で99.9％のつもり</div> <div class="test3">.test3</div> <div class="test4">div.test4{width:23%;青}</div> <div class="test4">.test4（左右1％のマージンと23％のコンテンツで25％）が4個で100％のつもり</div> <div class="test4">.test4</div> <div class="test4">.test4</div> <div class="test1">.test1{width:98%;黄}（左右1％のマージンと98％のコンテンツで100％）のつもり</div> </body> </html>
- ベストアンサー
- CSS
- このcssをIEで見ると？
お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
- 隙間があく理由
以下のHTMLを見ると隙間がキャンバスの下に開きます。 クロム IE ファイヤーフォックス似て確認。 なぜあくのかわかりません。教えてください。 ------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト</title> <style> <!-- *{ margin:0px; padding:0px; border:none; } canvas{ width:100px; height:50px; background-color:red; } div{ width:100px; height:50px; background-color:green; } --> </style> </head> <body> <canvas></canvas> <div> </div> </body> </html> --------------------------------------
- ベストアンサー
- CSS
- Firefoxで、tableに指定したmargin-leftがスクロールバーで×（ソース記載にて長文です）
HTMLにて質問してましたが、回答ありませんでしたので、カテゴリを変えて質問させていただきます。 bodyをmargin、paddingともに0にして、tableを配置してmargin-left:15pxを指定したのですが、スクロールバーが出た時にFireFox2.0でずれます（他、IE6、safari3は問題無）。 どうも、marginがきかなくなるようですが、原因がお分かりになれば教えていただけないでしょうか？ また、回避策は何かあるでしょうか？ divに設定したmarginは問題無です。 tableをdivで括って、marginはdivに設定すれば問題ありません。でも、できればシンプルにbodyの直下にtable配置したいと思っているのですが…。 どうぞよろしくお願いします！ 以下にサンプルソースを記述します↓ ------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テーブル</title> <style> <!-- body{ margin:0; padding:0; } --> </style> </head> <body> <div style="width:500px; background-color:#00FF00; margin-left:14px;">div</div> <table width="500" border="0" cellspacing="0" cellpadding="0" style="margin-left:14px;"> <tr> <td bgcolor="#0099FF">テーブル</td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
- ＤＩＶが二つ続いた後の下にテーブルを表示したいので
添付はエクセルの画像ですが ＨＴＭＬでＤＩＶが二つ続いた後の下にテーブルを表示したいのですが <html> <head> <title>test</title> <style type="text/css"> <!-- div.migi, div.hidari{ float : left ; text-align:center; width:100px; background-color: #ffff00; border: 1px #BDBDBD solid; padding: 10px 6px; } div.migi{ float: right; } --> </style> </head> <body> <div class="hidari"> hidari </div> <div class="migi"> migi </div> <table border=1 cellspacing=0> <tr><td>1</td><td>2</td></tr> </table> </body> </html> このコードだとDIVの中にテーブルが入ってしまいます。 理想は添付画像です。 どうすれば良いでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- WindowsのIEで、スタイルシートのfloatがずれてしまいます
スタイルシートの「float」についてなんですが、 ------------------------------------------------------------------- <html> <head> <title>メニューテスト</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #menu{ float: left; width: 170px; margin-top: 0px; margin-left: 8px; } --> </style> </head> <body> <div id="menu">あいうえお</div> </body> </html> ------------------------------------------------------------------- 上記のようにすると、WindowsのIE5以降で見たとき、 「あいうえお」のマージンが8pxと指定してあるにもかかわらず、16pxほど空いてしまいます。 「float」を外せば正常に表示されます。 他のブラウザでは正常に表示されますので、Win IEのみの現象だと思うのですが 何か良い解決方法はないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございました。