ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

Webデザインコミュの問い合わせフォーム確認画面のワイドエラー!

  • mixiチェック
  • このエントリーをはてなブックマークに追加
始めまして。
朝一番で書き込み失礼致します。

添付ファイルのようにお問い合わせフォームの確認の際に
テーブルがはみ出してレイアウトが崩れてしまいます。

お問い合わせフォーム(1つ目)でも同じ現象がおきたので下記のように

cols="30" や size="40" と調節しました。
テーブルは<diiv>でくくり幅を指定していますが、

確認画面(2つ目)ように枠内を指定するタグはございません。

添付画像はなにも入力せずに確認画面へ進んだ場合のレイアウトのズレとなります。
あとコレが終われば完成なのですが、つまずいております・・・・

どうかアドバイスを宜しくお願い致します。


///////////お問い合わせフォーム////////(1つ目)/////////////

<table class="table002" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>お問い合わせ区分<br />
[必須]</th>
<td><input name="お問い合わせ区分" type="radio" value="店舗買い取りについて" id="kind001"/>
<label for="kind001">店舗買い取りについて</label>
<input name="お問い合わせ区分" type="radio" value="宅配便買い取りについて" id="kind002"/>
<label for="kind002"> 宅配便買い取りについて</label>
<br />
<input name="お問い合わせ区分" type="radio" value="出張買い取りについて" id="kind003"/>
<label for="kind003"> 出張買い取りについて</label>
<input name="お問い合わせ区分" type="radio" value="業者様からの買い取りについて" id="kind004"/>
<label for="kind004"> 業者様からの買い取りについて</label>
<br />
<input name="お問い合わせ区分" type="radio" value="パートナーショップ加盟について" id="kind005"/>
<label for="kind005">パートナーショップ加盟について</label>
<input name="お問い合わせ区分" type="radio" value="その他" id="kind006"/>
<label for="kind006"> その他</label></td>
</tr>
<tr>
<th><label for="name">お名前</label>
[必須]</th>
<td class="stbg">(例:山田花子) <br />
<input name="お名前" type="text" id="name" size="25" /></td>
</tr>
<tr>
<th><label for="kana">ふりがな</label>
[必須]</th>
<td>(例:やまだはなこ)<br />
<input name="ふりがな" type="text" id="kana" size="25" /> </td>
</tr>
<tr>
<th><label for="zip">郵便番号</label></th>
<td class="stbg"> (半角数字 例:431-1209)<br />
<input name="郵便番号" type="text" id="zip" size="15" maxlength="8" /></td>
</tr>
<tr>
<th><label for="add">ご住所</label></th>
<td>(例:神奈川県横浜市都筑区池辺町000-0)<br />
<input type="text" name="ご住所" id="add" size="40" /></td>
</tr>
<tr>
<th><label for="tel">電話番号</label>
[必須]</th>
<td class="stbg"> (半角数字 例:123-456-7890)<br />
<input name="電話番号" type="text" id="tel" size="40" /></td>
</tr>
<tr>
<th><label for="mail">Email</label>
[必須]</th>
<td> (半角英数字 例:123@abc.ne.jp)<br />
<input type="text" name="Email" id="mail" size="40" value="" /></td>
</tr>
<tr>
<th><label for="message">お問い合わせ内容</label>
<br /></th>
<td class="stbg"><textarea name="お問い合わせ内容" cols="30" rows="7" id="message"></textarea></td>
</tr>
</tbody>
</table>

///////////////////確認画面/////////////////////////

<table class="table002" border="0" cellspacing="0" cellpadding="0">
_CONFIRM_TABLE_
<tr>
<th>$KEY</th>
<td>$VAL </td>
</tr>
_CONFIRM_TABLE_
</table>

///////////////////////////////////////////////////////////////////////////////

コメント(9)

添付ファイルが一個しかないような気がします。
目標(理想)はどうなることなのでしょう?
<diiv>だからとかいうオチじゃなくて、<div>タグでくくってるんですよね?

ソース全部見てないのに書いてすみません。

トップで気になったので。。。

私が見直すとすれば

.table002
のdisplay・width・margin・paddingの見直し

もしくは

.table002 td
のwidth・margin・paddingの見直し

とcss周りを疑ってみます。
外れているかもしれませんが、環境はVistaのIEじゃないですか?


私も以前Vistaが出たての頃にフォームを作ったとき、XPのIE6/7では正常に表示されるのにVistaのIE6/7でのみ横幅が倍ぐらいのサイズで表示されたことがありました。
(FirefoxではXP,Vista共に正常に表示されてました)
それに引きずられ、テーブル幅もえらいことに

【input】タグに【size="***"】を指定しても全く効かず意図されたサイズで表示されなかったので、【input】タイプに【class】指定してcssでサイズを指定してやることでVistaでも意図したサイズで表示できるようになったのですが・・・

それ以降は【input】タグのサイズはcssで指定することにしています。
<input>のsize属性で横幅を指定しても、
ブラウザによってサイズはかなり違ってしまいます。
ueさんがおっしゃるように、cssでinputのサイズ指定をすることを
おすすめします。
ズレた確認画面のソースをみると、一行目に余分なものがあるとか?

通常一行目にあるのドキュメントタイプがなんたらっていう宣言の前になんか文字が入ってたらズレます。
皆様ありがとうざいます。苦戦中です・・・
cssでinputのサイズ指定してもだめでした。
頑張ります!!
CSSも見てみないとなんとも言えないですね

トピずれだけど、お問い合わせ区分が整列していないのが気になるたらーっ(汗)
テーブル幅を100%とかでしてませんか?

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう!

Webデザイン 更新情報

Webデザインのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング