- 締切済み
safariとfirefoxとでテーブルレイアウトが変わってしまい、原因がわからずに困っています。
safariとfirefoxとでテーブルレイアウトが変わってしまい、 原因がわからずに困っています。 下記のタグでテーブルを表示したいのですが、 safariでは私が頭の中で描いていた通りのレイアウトになるのですが firefoxで開くとボックスが横に伸びてしまいレイアウトが変わってしまいます。まだ素人なので原因がまったくわからず困っています。 どなたかアドバイスを頂ければ幸いです。 <style type="text/css"> marguee { background:#000000; color:#ff6699; padding:5px 0; } .profile th{ background:#fff0ff; font:10px Verdana; color:#666666; text-align:right; padding:5px; } .profile td{ background:#ffffff; font:10px Verdana; color:#333333; padding:5px; } </style> <body bgcolor="000000"> <!-- TEMPLATE START --> <div class="profile"> <div align="center"> <table bgcolor="#000000" cellspacing="1" cellpadding="0"> <tr> <td colspan="2" style="padding:0"> <marquee behavior="alternate">Biography</marquee></td> </tr> <tr> <th>Name</th> <td width="300">テキスト</td> </tr> <tr> <th>DOB</th> <td width="300">テキスト</td> </tr> <tr> <th>Height</th> <td width="300">テキスト</td> </tr> <tr> <th>POB</th> <td width="300">テキスト</td> </tr> <tr> <th>Blood Type</th> <td width="300">テキスト</td> </tr> <tr> <td colspan="2" style="padding:0"> <marquee behavior="alternate">Biography</marquee></td> </tr> </table> </div> <!-- TEMPLATE END --> </body> </html>
- kenkenyy
- お礼率36% (7/19)
- HTML
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
素人とはいえ、間違った迷路に踏み込んでしまった感があります。参考にされている参考書は破いて捨てちゃいましょう。あまりにもひどい。最後に問題点の一部を列挙しておきます。 最初に、サンプルHTML(HTML4.01 strictです) ★下記サンプルは、視認性のためインデントを全角スペースに置き換えています。 ★全角スペースをタブ(\t)か連続した半角スペースに置換して表示テストをすること。 ____ここから <!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>Untitled</title> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body{ background-color: rgb(240,240,255); } div.main{ width: 90%; margin-left:auto; margin-right: auto; border:solid red 1px; } div.main p{ text-indent:1em; line-height: 1.4em; } div.main table{ border-collapse: separate; margin: 1em 10em; border-spacing: 2px; border-width:1px 3px 3px 1px; border-style: solid; border-color: black gray gray black; } div.main table th{ background-color:#fff0ff; font-size:10px; font-family: Verdana "ＭＳ ゴシック" sans-serif; color:#666666; text-align:right; padding:5px; } div.main table td{ background-color:#ffffff; font-size:10px; font-family: Verdana "ＭＳ ゴシック" sans-serif; color:#333333; padding:5px; width: 300px; } div.main table td.title{ text-align:center; background-color: skyblue; } --> </style> </head> <body> <!-- TEMPLATE START --> <div class="main"> <table summary="伝記"> <tbody> <tr> <td colspan="2" class="title">Biography</td> </tr> <tr> <th abbr="name">Name</th> <td>テキスト</td> </tr> <tr> <th abbr="DOB">DOB</th> <td>テキスト</td> </tr> <tr> <th abbr="height">Height</th> <td>テキスト</td> </tr> <tr> <th abbr="POB">POB</th> <td>テキスト</td> </tr> <tr> <th abbr="BT">Blood Type</th> <td>テキスト</td> </tr> <tr> <td colspan="2" class="title"> Biography </td> </tr> </tbody> </table> <p> この見本は、提示されたものを書きなおしたものですが、わかりやすくするために、一部プロパティや値を追加しています。 </p> <p> 一括指定のfontは、使い方のルールがとてもややこしいので、できれば個別に指定するほうがよい。またfont-familyは大体フォント(Verdanaには日本語がない)と総称ファミリ名(Verdanaはほとんどのシステムにあるだろうが、やはり指定すべき) </p> </div> <!-- TEMPLATE END --> </body> </html> Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) でテスト済みです。 【問題点】 marguee { ・・・・marquee要素は廃止されました。・・・margeeではなくmarquee .profile th{ background:#fff0ff;・・・・backgroundではなく、background-colorです。 font:10px Verdana;・・フォントファミリは、大体フォント名と、総称ファミリ名も書くこと。そのために分けて書くほうがよい。 ・・・・ } .profile td{ ・・・・ font:10px Verdana;・・・同上 color:#333333; padding:5px; } </style> <body bgcolor="000000">・・・styleを使おう。 <!-- TEMPLATE START --> <div class="profile"> <div align="center">・・・alignは非推奨!!! <table bgcolor="#000000" cellspacing="1" cellpadding="0"> ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ スタイルシートで指定しよう。また、必ずsummaryを書くこと ・・・ <marquee behavior="alternate">Biography</marquee></td> ・・・・これは廃止された要素でIE独自タグ・・使うな!! ・・・ <td width="300">テキスト</td> ・・・table描画アルゴリズムから最初の一行だけ指定する。詳しくは仕様書参照 ・・・・・ </body> </html>
関連するQ&A
- レイアウトの崩れについて
先日から初めてHP作りに挑戦しているのですが、<div>の中の<table>の位置がおかしい（tableの位置がdivの下のほうに突き抜けて表示される）ので困っています。 どうすればdivの中にtableがおさまるでしょうか。 (XHTML) <div id="main"> <div class="contents"> <table> <tr> <td id="tdl" rowspan="4">>映像</td> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> <tr> <th>文字</th> <td>文字</td> </tr> </table> </div> </div> <div id="sub"> 内容 </div> (CSS) #main { width: 600px; float: left; } .contents { width: 600px; height: 155px; background-color: #f5f5dc; font-size: 16px; float: left; } table { width: 590px; height: 150px; border-collapse: collapse; table-layout: fixed; border: solid; border-color: #f1f1f1; } th { width: 100px; height: 32px; border-bottom: solid; border-bottom: thin dotted; background-color: #f1f1f1; font-size: 16px; text-align: left; } #tdl { width: 160px; height: 145px; border: none; } td { width: 320px; height: 32px; border-bottom: thin dotted; font-size: 16px; text-align: left; } #sub { width: 150px; height: 145px; background-color: #999; float: right; } 関係あるか分かりませんが、サイト全体の幅は770pxです。 書き方がめちゃくちゃだと思うので、おかしなところも指摘していただけると幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
- tableが縮まらない
<th width="20" ><div style="background-color:#FF9;height:28px;padding-top:12px">**</div></th><td width="10" bgcolor="#CCFFFF" >**</font>**</font><br><font><font color="#000000" >45</font></font></td> どうしても <td width="10" bgcolor="#CCFFFF" > この部分が縮まらないです。何故でしょうか？？
- ベストアンサー
- CSS
- テーブルを挿入すると他のCSSと干渉してレイアウトが崩れてしまいます。
いくらやっても作成したテーブルを挿入するととの画像やメニューと干渉してレイアウトが崩れてしまいます。テーブルを取るとレイアウトが戻ります。。。 文字量の関係でテーブルだけ記入しました。 <HTML> <HEAD> <STYLE type="text/css"> <!-- /*テーブル*/ table {position:absolute; left:200px; top:450px; font-family:MS,UI,Gothic,標準; FONT-SIZE: 11px; COLOR: #666666; font-weight: lighter; text-align:center; border-collapse:collapse } caption { font-family:MS,UI,Gothic,標準; FONT-SIZE: 11px; COLOR: #666666; font-weight: lighter; text-align:left; } table,th,td {border:1px solid} div {margin:20px} --> </style> </head> <body> <div> <table> <caption>ジャズシューズサイズ表</caption> <tr><th width=70px>Sansha</th><td width=30px>2</td><td width=30px>3</td><td width=30px>4</td><td width=30px>5</td><td width=30px>6</td> <td width=30px>7</td><td width=30px>8</td><td width=30px>9</td><td width=30px>10</td><td width=30px>11</td> <td width=30px>12</td><td width=30px>13</td><td width=30px>14</td><td width=30px>15</td> </tr> <tr><th>(cm)</th><td>21</td><td>21.5</td><td>22</td><td>22.5</td><td>23</td><td>23.5</td><td>24</td> <td>24.5</td><td>25</td><td>25.5</td><td>26</td><td>26.5</td><td>27</td><td>27.5</td> </tr> </table> </div> </body>
- ベストアンサー
- CSS
- ブラウザによってテーブルのセルの高さが変わる
質問させて頂きます。 現在、テーブルを使用して表を作っているのですが、 ブラウザによってセルの高さが変わってしまいます。 safariでは思った通りのレイアウトになるのですが、 chrome、Firefoxでは [ height ] の値が反映されていないのか、 崩れてしまいます。 添付は希望するレイアウト（safariではこのように表示されます）です。 ソースを記載しますので、どなたかご教示お願い致します。 --- html --- <table class="hogs" cellspacing="5"> <tr> <td width="180" height="184" rowspan="3"><img src="img/001.gif" width="180" height="184" alt=""/></td> <th height="22">項目１</th> <td>文章１</td> </tr> <tr> <th height="22">項目２</th><td height="22">文章２</td> </tr> <tr> <th height="140" valign="top">項目３</th><td valign="top">文章３</td> </tr> </table> --- CSS --- table.hoge { background-color: rgba(50,50,50,0.3); width: 640px; height: 184px; margin: 0 auto 18px; padding: 10px; } table.hoge th { height: 22px; background-color: #7ac0c9; width: 80px; } table.hoge td { padding: 0 20px; }
- ベストアンサー
- HTML
- 【ＣＳＳ】floatで左右に並べた<div>のマージンが効かない。
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A"> <div class="B"> <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> <div class="C" > <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> </div> 【CSS】--------------------------------- #A { margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }
- ベストアンサー
- HTML
- css テーブルについて
よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }
- ベストアンサー
- CSS
- 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
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- CSS
- cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- レイアウトのためにTableを使ってはいけない？
「Tableはレイアウト目的で使うべきではなく、レイアウトはCSSで定義するべき」ということについて、 もっともだと思うものの、具体的なやり方がわかりません。 divかspanとclassを使うことは予想できるのですが・・・ 次のようなレイアウトの場合、CSSでどのように置き換えるのでしょうか？ <table width="800"> <tr> <td colspan=2 width="800"> ヘッダ領域 </td> </tr> <tr> <td width="100"> メニュー領域 </td> </tr> <tr> <td width="700"> コンテンツ領域 </td> </tr> </table>
- ベストアンサー
- CSS
