safariとfirefoxとでテーブルレイアウトが変わってしまい、原因がわからずに困っています。

締切済

質問者：kenkenyy
質問日時：2010/01/07 00:18
回答数：1件

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">


<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>


</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2010/01/07 01:30

　素人とはいえ、間違った迷路に踏み込んでしまった感があります。

参考にされている参考書は破いて捨てちゃいましょう。あまりにもひどい。最後に問題点の一部を列挙しておきます。
　最初に、サンプル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">

</style>
</head>
<body>

　<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>

</body>
</html>

Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
でテスト済みです。

【問題点】
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を使おう。

<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>