IE6でレイアウトが崩れてしまいます

質問

制作しているWebサイトでIE6でプレビューした時のみ中央に配置したページが左にずれてしまいます。

ただし、他のページは中央に表示されていて、メールフォームを入れているページだけが左に表示されてしまいます。

ということから、スタイルシートの問題というよりは、formタグやレイアウトテーブルの置き方の問題なのだろうと思うのですが、助言をいただけないでしょうか。よろしくお願いいたします。

ソースは以下の通りです。

--------------------------------------
<form action="./clipmail.cgi" method="post" enctype="multipart/form-data">
<input type="hidden" name="need" value="姓 名" />
<input type="hidden" name="match" value="メール メール確認" />
<table border="0" cellpadding="5" align="center" width="80%">
<tr>
<td><img src="images/l_name.gif" alt="ご氏名" width="70" height="21" /></td>
<td>　姓（全角）
<input type="text" name="姓" size="12" />　
　名（全角）
<input type="text" name="名" size="12" />（必須）</td>
</tr>
<tr>
<td><img src="images/l_name2.gif" alt="ご氏名（かな）" width="125" height="21" /></td>
<td>せい（全角）
<input type="text" name="せい" size="12" />
　めい（全角）
<input type="text" name="めい" size="12" />（必須）</td>
</tr>
<tr>
<td><img src="images/l_age.gif" alt="年代" width="54" height="21" /></td>
<td><label>
<select name="年代">
<option value="" selected="selected"></option>
<option value="～19歳">～19歳</option>
<option value="20～29歳">20～29歳</option>
<option value="30～39歳">30～39歳</option>
<option value="40～49歳">40～49歳</option>
<option value="50～59歳">50～59歳</option>
<option value="60～69歳">60～69歳</option>
<option value="70歳～">70歳～</option>
</select>（必須）</label></td>
</tr>
<tr>
<td><img src="images/l_mail.gif" alt="メールアドレス" width="135" height="21" /></td>
<td><input type="text" name="メール" size="50" />（必須）</td>
</tr>
<tr>
<td><img src="images/l_mailconfirm.gif" alt="メールアドレス確認" width="167" height="21" /></td>
<td><input type="text" name="メール確認" size="50" />（再度入力）</td>
</tr>
<tr>
<td><img src="images/l_reply.gif" alt="ご希望時間帯" width="182" height="21" /></td>
<td><select name="ご希望時間帯">
<option value="時間指定なし" selected="selected">時間指定なし</option>
<option value="午前">午前</option>
<option value="午後">午後</option>
<option value="18時以降">18時以降</option>
<option value="土曜日">土曜日</option>
<option value="日曜、祝祭日">日曜、祝祭日</option>
</select>
（必須）</td>
</tr>
<tr>
<td><img src="images/l_consult.gif" alt="ご相談内容" width="103" height="21" /></td>
<td><textarea name="ご相談内容" rows="10" cols="60"></textarea></td>
</tr>
<tr>
<td colspan="2"><img src="../common/images/spacer.gif" width="1" height="10" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="入力内容を確認する" /><img src="../common/images/spacer.gif" height="10px" width="20px" /><input type="reset" value="すべて書き直す" /></td>
</tr>
</table>
</form>

と、こんな感じです。
ちなみに、これを囲んでいる<div id="container">は外部スタイルシートで
#container {
margin: 0 auto;
width: 800px;
}

としています。
ページのトップで使用しているイメージが最大幅800pxで、背景に幅800pxの画像を使い、コンテナが中央に来るように配置しています。

どうぞよろしくお願いいたします。

回答No.2

noname#83877

#containerにtext-align:left;を、それを囲っている要素（何も無ければdivで囲い）にtext-align:center;を指定してみてください。

お礼

早速のご回答ありがとうございます。

metametamu様の記載されたようにしてみましたが状況は変わらずです。
ちなみに、formを<div id="mail">で囲っての設定をし、他にも別のスタイルを割り当ててみましたが改善されていない状態です。

時間がもったいないので今回はあきらめて、このページだけ、テーブルだけでレイアウトをくむことにします。ありがとうございました。

回答No.1

SAYKA

ブラウザは800px以上あって、その外側の #container はそのブラウザ表示領域から見てちゃんと中央にある？(formは無関係)
その #container の中でformが左に寄ってしまうって話ならそれはそうだと思うよ。
だってformに対してどうするかstyleが無いし。

お礼

早速の回答誠にありがとうございます。

ブラウザ等の仕様や表示についてですが、
ブラウザの横幅は800px以上あり、#containerは表示領域の中央に配置されています。（IE6で、同サイトの別ページ（form以外の基本的なレイアウトはまったく同じ）は問題なく中央に配置されています。）
#containerはスタイルシートでwidth:800pxに固定し、margin: 0 auto;　として中央に配置しています。

それと、IE6以外のブラウザでは問題なく配置されている状態です。

formに対してスタイルシートでmargin: 0 auto;としたり、formをさらに<div>で囲んでalign="center"としたり、スタイルシートでmargin: 0 auto;としてみましたが、改善はされていない状態です。