- 締切済み
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>
- みんなの回答 （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>
