• ベストアンサー

IE6、Net7、opera9、Firefox2などでテーブルを画面中央に配置する方法

こんにちは。 ブラウザー別に、テーブルを画面中央に配置する方法を教えてもらいたいです。以下の方法だと、IE6、opera9では画面中央に配置されましたが、Net7、Firefox2では画面中央に配置されず、右側に表示されてしまいます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サイト</title> <style type="text/css"> <!-- table{ margin-left: auto; 　margin-right: auto; } --> Net7、Firefox2でも画面中央に配置できる方法はないでしょうか？何分初心者なので、ソース付きで解説してくれれば有難いです。 それでは、よろしくお願いします。

noname#32879
noname#32879
  • HTML
  • 回答数3
  • ありがとう数2

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

  • ベストアンサー
回答No.1

　margin-right: auto; ↑ここに全角空白が入っているからプロパティ名をFirefoxが把握できなくてそうなっているだけ。半角空白だったり，スペースなしならば再現しない

noname#32879
質問者

お礼

丁重な質問有難うございます。

その他の回答 (2)

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.3

PS.ツール→エラーコンソールにJavaScriptのみならずCSSのエラー情報も吐き出されます

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.2

Net7って普通言わないと思うけどなぁ…？ 私の場合Netscapeと一回書いた上でN7とかNB8とか表記します。あとFirefoxの場合は一回Firefoxと書いてから以後Fxと書くことがしばしば。 ちなみにNetscapeの正式名は2-3がNetscape Navigatorで4がNetscape Communicatorで6-7がNetscapeで8がNetscape Browserで9が再びNetscape Navigatorです。 ついでに言っとくとNetscape7はサポート終了してますんで、動作確認をすること自体に問題はなくともサイトのリファラーへ積極的に推奨したりしないようにしましょうね。 と言うか差し支えなければ動作確認しなくても問題なしです。余り古いバージョンまでサポートするとデザインに制約が掛かる…(- -; 古いブラウザのサポートよりも新しいブラウザのサポートに重点を置いたほうがいいです。 （ただしOS環境などを考慮してやや古いOSの使える最新版ブラウザのサポートを行う結果ちょっと古いブラウザもサポート対象になってると言うのは適正かも。） Firefoxは形式こそ異なれどNetscapeと同じブラウザシステムの最新タイプを使用していますし、Netscapeと同じ形式がよければこれまた同じシステムを利用した同じ形式のソフトウェアSeaMonkeyを使うという手段があります。 で、今回の場合全角空白含めてCSSのいちプロパティだと判定しているようです。 NetscapeもFirefoxもGeckoだから同じエラーを出したみたい。 Netscapeは古いからそういう機能がないけどFirefoxなどはCSSのエラーを検出できますよ。 （と言いながらFirefoxを使わなかったのは秘密♪） エラー: プロパティ '　margin-right' は不明です。 宣言は除外されました。 ソース ファイル: （省略） 行: 11

noname#32879
質問者

お礼

丁重な質問有難うございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • IEでCSSの中央寄せが効かない

    common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？

    • ベストアンサー
    • HTML
  • CSSでテーブルを中央にする方法

    CSSでテーブルを中央にする方法を教えてください いろいろなサイトで見た通りにしたのですが、どうしてもFirefoxではテーブルが中央によりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <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 name="description" content=""> <meta name="keywords" content=""> <title>テーブル</title> <style type="text/css"> <!-- .tableley { margin-left: auto; margin-right: auto; text-align: center; } //--> </style> </head> <body> <div class="tableley"> <table cellpadding="0" cellspacing="0" summary="テスト" border="1"> <caption style="font-weight: bolder;">てすと</caption> <tbody> <tr> <td>てすと1</td> <td>てすと2</td> <td>てすと3</td> <td>てすと4</td> </tr> <tr> <td>てすと5</td> </tr> </tbody> </table> </div> </body> </html> 何が悪いのでしょうか？ <div align="center">にするしか方法がないのでしょうか？ 文法検証すると<div align="center">はあまりよくない使い方と指摘されてしまいます よろしくお願いします。

    • ベストアンサー
    • HTML
  • IEだと背景透明テーブル内の文字が見れない

    dreamweaverMXを使ってHPを制作しました。 firefoxだと表示されるのですが、IEだと透明なテーブル内の文字が表示されません。以下、ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Script-Type" content="text/css"> <meta name="keywords" content="○○"> <title>○○</title> <style type="text/css"> <!-- body { background: url(../sozai/haikei_info_05.gif) fixed; } p { line-height: 150%; } </style> <link href="../scrollber.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="50" topmargin="50"> <table width="400" border="0" cellpadding="10" cellspacing="0" style="filter:alpha(style=0,opacity=0)"> <td height="441" nowrap><p align="left"><font size="-1">文章文章文章</font></p></td> </table> </body> </html> 外部CSSでスクロールバーも変えているのですが、こちらはIEは表示されてもfirefoxではデフォルトになってしまいます。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 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
  • body要素

    body要素のCSSをうまく反映させることができません。 table_testを画面中央に表示させて、全体の背景色を赤にしたいのですができません。 どこが違うのでしょうか？ ご教授ください。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"><TITLE></TITLE> <style type="text/css"> <!-- .body { text-align:center; margin-right:auto; margin-left:auto; bgcolor:red; } .table_test { width:700px; border-style:solid; border-color:blue; border-width:1px; margin-right:auto; margin-left:auto; //--> </style> </head> <body> <table class="table_test"> <tr> <td> </td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • html,css初心者です。ヘッダーの余白について

    ヘッダーの余白について教えて下さい。 どうしてもヘッダーの上部分に余白ができてしまいます。 HTMLとCSSをはります。 bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・ <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="font.css" type="text/css"> </head> <body> <div id="header"><!--/ #header --> あいうえお </div> </body> <html> CSS #header{ width: 980px; margin: 0 auto; background: #fff; text-align: left; } 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 作成したCSSがfirefoxでは見れますがIEでは反映されません

    私が今作成しているCSSのサイトなのですが。。 firefoxでチェックしながらはちゃんとみれていたのですが、最終チェックでIEでみるとCSSが反映されずに表記されてどうにも困っています。 原因なんなのでしょうか？ お詳しい方お教えくださいませ。 -------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <title>museo international</title> <link rel="stylesheet" type="text/css " href="css/index.css" media="screen.print" /> -------------------------------------------------------------- なにか違う所がありますか？どなたかお教えください。 困っています。

  • 【CSS】Firebfox内でbackground-imageを使うって階層化すると・・・

    IE６では正しく表示されるのに、FireFoxだとずれてしまうという問題について、ご教授ください。 CSSで２つのBOX（outboxとinbox）と定義します。 outboxの定義の中にinboxを配置します。 outboxの背景にbackground-imageをいれなければ問題ないのですが、いれるとinboxの位置がおかしくなってしまうのです。（outboxからのmarginが効かない）IEでは正しく（意図したように）表示されています。 ソースは以下です。 test.gifは、outboxのwidthとheightにあわせて作成するか、widthをheightを変更してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="ja"> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title>test page</title> <style type="text/css"> <!-- .outbox { margin-top:100px; margin-left:auto; margin-right:auto; width:449px; height:270px; background-image:url("test.gif"); background-repeat:no-repeat; } p.inputbox { margin-top:120px; margin-left:110px; } --> </style> </head> <body> <div class="outbox"> <p class="inputbox">aa</p> </div> </body> </html>

    • ベストアンサー
    • HTML
  • ホームページ作り

    ＨＴＭＬでは<meta http-equiv="content-style-type" content="text/css">なのですが、 ＸＨＴＭＬでは<meta http-equiv="content-style-type" content="text/css" />このように記述するのでしょうか？ 分かる方がいたら教えてください。

  • Operaでズレない方法をご指導下さい

    IE6、firefox1.5ではズレないのですが、 Opera9.1.0では <div id="main">テキスト</div> の箇所が左に1pxズレてしまします。 ブラウザの横幅を大きくしたら小さくしたりすると、 ズレない場合もあるのですが、最大にすると1pxだけズレます。 ズレない良い方法がありましたら、どうか教えて下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { background-image: url(bg.jpg); background-repeat: repeat-y; background-position: center top; margin: 0; } #main { background-color: #00FFCC; width: 700px; margin:0 auto; } --> </style> </head> <body> <div id="main">テキスト</div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する