IE6とIE7のHtmlレイアウトについて

質問

お世話になります。

現在、XHTMLで画面を作成しています。
Htmlのレイアウトについて、非常に困った問題が発生しています。
IE6で正常に表示されるものが、IE7では崩れて表示されてしまいます。

具体的にはテーブルの中身がIE6だと、

テーブル(右寄せ(本来の形))
---------|-----------------------------
aaa |テキストフィールド１
---------|-----------------------------
bbbbb |テキストフィールド2
---------|-----------------------------

具体的にはテーブルのｌ中身がIE7だと、

テーブル(中央揃え(ずれている状態))
---------|-----------------------------
aaa | テキストフィールド１
---------|-----------------------------
bbbbb | テキストフィールド2
---------|-----------------------------

になってしまいます。(汚くて、判りづらくてすみません！！)

以下にHTMLを記載します。
<table align="center">
<div>
　　　<tr>
　　<td>
</td>
</tr>
</div>
</table>
<table border="1">
<tr id="trpattern">
<td width="200">　
　　　　　　　　　　　　<labelid="reportpatternLabel"/></td>
　　　　　　　<td width="350">
　 <selectid="patternItems"onchange="hide(this.value);">
<option id="pattern">
</option>
</select><br></br>
</td>
</tr>
<tr id="trarea">
<td width="200"><label id="selectAreaLabel"/></td>
<td width="350">
<select id="areaItems" style="width:130;" onchange="selectNsc()">
<option id="area">
</option>
</select><br></br>
</td>
</tr>
<tr id="trnsc">
<div id="nscdiv">
<td width="200"> <label id="nscselectLabel"/></td>
<td width="350">
<select id="nscItems" style="width:130;" onchange="fillnscList()">
<option id="nsc">
</option>
</select><br></br>

</td>
</div>
</tr>
<tr id="trperiod">
<td width="200"><label id="periodLabel"/></td>
<td width="350">
<input type="text" id="periodfrom"></input>
<label id="symbolLabel"></label>
<input type="text" id="periodto"></input>
</td>
</tr>
<tr id="trlevel" style="display:none">
<td width="200"><label id="levelLabel"/></td>
<td width="350">
<select id="levelItems">
<option id="level">
</option>
</select><br></br>
</td>
</tr>
<tr id="trcompare" style="display:none">
<td width="200"> <label id="compareAnotherLabel"/><label id="NSCAverageLabel"/></td>
<td width="350">
<input type="radio" name="nscrdb" value="Yes" label="Yes" onclick="callshow(this.value);"></input>
<label> Yes</label>
<input type="radio" name="nscrdb" value="No" label="No" checked="checked" onclick="callshow(this.value);"></input>
<label> No</label>
</td>
</tr>
</table>
---------------------------------------------------

どの様なタグ、方法を用いれば解消されるのでしょうか？
どなたかご教授願いますでしょうか？
お願いいたします！！

回答No.1

echoes_x86 · ベストアンサー

おはようございます．
テーブルの中身の水平方向の揃えを変えたいなら，
<td align="right">aaaa</td>
などとすれば良いでしょう．
ただし，CSSを使っているならその部分の記述を補足してください．

また，現状ではXHMLの書き方が滅茶苦茶なので，
正しく描画される保証がありません．
XHTMLなら以下の点を修正してください．
(1) 要素の書き間違い (selectid，optionid)
(2) 改行は<br />とすべき
(3) <label>は空要素ではないので，
<label id="selectAreaLabel"/>としてはいけない
(4) <div>の入れ子関係がおかしい
無理して文法の厳格なXHTMLにする必要はないのでは？

回答No.2

DrFell

XHTMLで書かれたそうですが、その意味をお分かりでしょうか？
IEが大負けに負けて、ものすごく気をつかって、勝手に補って解釈して表示してくれています。ブラウザはIEだけではありません。FirefoxやOperaやSafariでもチェックされましたでしょうか？

まずは、ある程度正しいｈｔｍｌの文法で書かれる事をお奨めします。
で、どこが悪いかといいますと、とてもここには書ききれません。
こちらのチェックをご使用ください。
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
ダメだしされた、場所にはなぜダメなのかのｈｔｍｌのルールが丁寧にかかれている場所へのリンクが張られています。

ぱっとみ、テーブルのtrの次にdivが出てくるところをみると、ｘｈｔｍｌどころか、ｈｔｍｌの基本さえ、まったく理解されていないように思います。きついことを言うようですが、まったくわかっておられないようなので、基本を学ぶ段階にきているお思います。