お世話になります。
現在、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>
---------------------------------------------------
どの様なタグ、方法を用いれば解消されるのでしょうか?
どなたかご教授願いますでしょうか?
お願いいたします!!
No.1ベストアンサー
- 回答日時:
おはようございます.
テーブルの中身の水平方向の揃えを変えたいなら,
<td align="right">aaaa</td>
などとすれば良いでしょう.
ただし,CSSを使っているならその部分の記述を補足してください.
また,現状ではXHMLの書き方が滅茶苦茶なので,
正しく描画される保証がありません.
XHTMLなら以下の点を修正してください.
(1) 要素の書き間違い (selectid,optionid)
(2) 改行は<br />とすべき
(3) <label>は空要素ではないので,
<label id="selectAreaLabel"/>としてはいけない
(4) <div>の入れ子関係がおかしい
無理して文法の厳格なXHTMLにする必要はないのでは?
No.2
- 回答日時:
XHTMLで書かれたそうですが、その意味をお分かりでしょうか?
IEが大負けに負けて、ものすごく気をつかって、勝手に補って解釈して表示してくれています。ブラウザはIEだけではありません。FirefoxやOperaやSafariでもチェックされましたでしょうか?
まずは、ある程度正しいhtmlの文法で書かれる事をお奨めします。
で、どこが悪いかといいますと、とてもここには書ききれません。
こちらのチェックをご使用ください。
http://htmllint.itc.keio.ac.jp/htmllint/htmllint …
ダメだしされた、場所にはなぜダメなのかのhtmlのルールが丁寧にかかれている場所へのリンクが張られています。
ぱっとみ、テーブルのtrの次にdivが出てくるところをみると、xhtmlどころか、htmlの基本さえ、まったく理解されていないように思います。きついことを言うようですが、まったくわかっておられないようなので、基本を学ぶ段階にきているお思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
cssで、表示されるテキストによ...
-
テーブルのセルに画像をピッタ...
-
中に<table></table>が使えるア...
-
HTMLのテーブルで桁をそろ...
-
tableにul,または,olを入れられ...
-
セル内の文字の色とサイズの指定
-
HTML <td></td>タグ セル内余...
-
HTMLでアンケートの作り方を教...
-
HTMLで外部ファイルの読み込み
-
EXCELからhtmlへの変換で罫線が...
-
テーブルの枠が2重線になるので
-
セルをまたがるリンク。
-
テーブルの線を極細にしたい
-
テーブルの行の高さを指定する...
-
ホームページ 表の上の余白を...
-
pythonのコードについてご教示...
-
テーブルを横に二つ並べて表示...
-
IE6とIE7のHtmlレイアウトについて
-
htmlのtable内に画像
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
cssで、表示されるテキストによ...
-
テーブルの任意の列を非表示に...
-
テーブルのヘッダとボディの幅...
-
ホームページ 表の上の余白を...
-
テーブルのセルに画像をピッタ...
-
中に<table></table>が使えるア...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
スタイルシートで colspan=3と...
-
テーブルの装飾
-
EXCELのセル内にHTMLタグを含む...
-
tableの要素(tr、td)に一...
-
テーブルの表示がずれます
-
tableでcolspanを使うと次行以...
-
HTMLで文とテーブルの間が空く。
-
値が0なら非表示にしたい
-
テーブルの行の高さを指定する...
おすすめ情報