みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

FORMのサイズがIEとFirefoxで違って困っています!

依頼されて問合せフォームを作成しているのですが、
<input type="text">や<textarea>の部分がIEとFirefoxでサイズが違ってしまい、綺麗に表示されません。

IEで丁度いい大きさにsize指定すると、Firefoxでは大きすぎ、
Firefoxで丁度いい大きさにsize指定すると、IEでは小さすぎます。

初心者でよく分からず、大変困っております。
どなたかご教示頂きたく、よろしくお願い致します!!

【(1)のCSS】
html {
scrollbar-face-color: #F5E1D8;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color:#F5E1D8;
scrollbar-3dlight-color: #F5E1D8;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
}

body {
margin:0 auto 0;
background-color: #FFFFFF;
font-family:sans-serif;
font-size:8pt;
}

form {
margin:0px;
scrollbar-face-color: #F5E1D8;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color:#F5E1D8;
scrollbar-3dlight-color: #F5E1D8;
scrollbar-arrow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
}

input {
font-size:12px;
}

#container {
width:957px;
margin:0 auto 0;
background-color:#FFFFFF;
}

#logo{
margin-left:80px;
height:120px;
}

#box1{
text-align:center;
line-height:20px;
height:100px;
}

#nyuryoku{
margin:0 auto 0;
width:418px;
height:600px;
background-image: url(../img/sinki_waku.gif);
background-repeat: no-repeat;
background-position: center center
}

#box2{
clear:both;
text-align:center;
line-height:20px;
width:957px;
height:250px;
background-image: url(../img/top_haikei.jpg);
background-repeat: no-repeat;
background-position: center bottom
}

#button{
margin:0 auto 0;
width:418px;
}

投稿日時 - 2009-11-04 17:26:20

QNo.5421693

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

CSSの最初に
*{
margin:0px;
padding:0px;
}
を入ないといろいろめんどうなことが起こります。
ブラウザのデフォルトのマージン設定がもろに違いとして現れることを防ぐCSSデザインの基本です。

投稿日時 - 2009-11-05 03:23:01

補足

CSSの最初に
*{
margin:0px;
padding:0px;
}
を入れるてみましたが、テーブルのcellpaddingが反映されず、
IEでの表示が乱れてしまいました。

これを回避する方法はございますでしょうか。
アドバイスよろしくお願い致します!

投稿日時 - 2009-11-05 04:11:57

お礼

*{
margin:0px;
padding:0px;
}

上記は付けず、下記ページを参考にしたら何とかなりそうです。
http://support.future-shop.jp/capability/cellpadding.html

回答ありがとうございました!

投稿日時 - 2009-11-05 04:36:29

表示ではFirefoxが正しい。
IEは8に成ってもHTMLやCSSにバグを残してます。
CSS IEハック
で検索すると結構参考に成る事例ふが紹介されてます。

投稿日時 - 2009-11-04 22:29:32

補足

回答ありがとうございます!
ちょっと調べてみたのですが、よく分かりませんでした。
具体的にはどうすれば良いのか教えて頂けると嬉しいです。
何度も本当にすみません><

投稿日時 - 2009-11-05 04:15:12

お礼

http://mbsupport.dip.jp/hp/form_10.htm

上記ページを参考にしたら何とかなりそうに思えてきました。
ご回答ありがとうございました!

投稿日時 - 2009-11-05 04:38:33

あなたにオススメの質問