「一気に最後まで読んだ」本、教えて下さい!

お世話になります。

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

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

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

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

テーブル(中央揃え(ずれている状態))
---------|-----------------------------
aaa | テキストフィールド1
---------|-----------------------------
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>
---------------------------------------------------

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

A 回答 (2件)

おはようございます.


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

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

XHTMLで書かれたそうですが、その意味をお分かりでしょうか?


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

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

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!