プロが教えるわが家の防犯対策術!

依頼されて問合せフォームを作成しているのですが、
<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;
}

A 回答 (2件)

表示ではFirefoxが正しい。


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

この回答への補足

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

補足日時:2009/11/05 04:15
    • good
    • 0
この回答へのお礼

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

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

お礼日時:2009/11/05 04:38

CSSの最初に


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

この回答への補足

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

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

補足日時:2009/11/05 04:11
    • good
    • 0
この回答へのお礼

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

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

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

お礼日時:2009/11/05 04:36

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