HTML・CSSコーディングが上手く行きません

Question

お世話になります。
HTML・CSSコーディングを依頼されたのですが、
なかなか上手く表示されず、困っております。

外部CSSデータは下記の通りです。

html {  
  height:100%;
  scrollbar-face-color: #00B7EE;
  scrollbar-highlight-color: #FFFFFF;
  scrollbar-shadow-color:#00B7EE;
  scrollbar-3dlight-color: #00B7EE;
  scrollbar-arrow-color: #FFFFFF;
  scrollbar-track-color: #FFFFFF;
  scrollbar-darkshadow-color: #FFFFFF;
}

body {
  height:100%;
  margin:0 auto 0;
  background-color: #FFFFFF; 
}

form {
  margin:0px;
  scrollbar-face-color: #00B7EE;
  scrollbar-highlight-color: #FFFFFF;
  scrollbar-shadow-color:#00B7EE;
  scrollbar-3dlight-color: #00B7EE;
  scrollbar-arrow-color: #FFFFFF;
  scrollbar-track-color: #FFFFFF;
  scrollbar-darkshadow-color: #FFFFFF;
}

#container {
  width:100%;
  height:100%;
  margin:0 auto 0;
  background-color:#FFFFFF;
  font-family:sans-serif;
  background-image: url(../img/top_haikei.gif);
  background-repeat: no-repeat;
  background-position: center bottom
}

#logo{
  float:left;
  margin-left:80px;
  height:180px;
}

#box1{
  clear:both;
  text-align:center;
  line-height:20px;
  height:230px;
}

#login_left{
  float:left;
  line-height:20px;
  width:700px;
  height:180px;
}

#login_right{
  float:left;
  height:180px;
}

#footer {
  width:950px;
  clear:both;
  text-align:center;
}

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

IEテスター（http://coliss.com/articles/browser/ie/928.html）で
表示確認しておりますが、
ブラウザのバージョンによって表示のされ方が違ってしまいます。

初心者の為、どなたか丁寧にご教示くださればと思います。
どうぞよろしくお願い致します！

TanakaHiro · Accepted Answer

ログインフォーム部分と背景画像を重ねたいという趣旨かと思いましたので、その趣旨で書きます。 ■html部・body部 height: 100%;は意図が不明です。 ■div#container部背景画像「top_haikei.gif」がウィンドウ幅に依存するようなデザインですので、いっそのこと、ここの部分でwidth: 950px;を指定して、幅固定デザインにしてしまった方がいいかもしれません。アクセシビリティを気にされる場合には別ですが。背景画像が必ず画面ウィンドウ下にくるようになってますので、input要素と背景画像を重ねたい場合には、ここで背景画像を指定しない方がいいでしょう。 height: 100%;は意図が不明です。 ■div#logo部 float: left;は不要ですので外しましょう。 ■div#box1部 div#logo部でfloatを外したら、ここのclear: both;も外しましょう。 ■div#login_left部・div#login_right部・div#footer部ログイン部分に先の背景画像を重ねたいのであれば、この３つをさらに

などボックスで囲み、そこに背景画像top_haikei.gifを指定しましょう。画像を全部表示させるためには、そのボックスにheight: 478px;などと指定すると良いでしょう。 ■div#login_right部こちらにもwidthを指定した方が無難です。 ■input要素 input要素のフォントサイズでデザインがくずれる可能性がありますので、アクセシビリティを気にされないのであれば、いっそのことフォントサイズ固定でいった方が楽かもしれません。（FireFoxやSafariには効きませんが、IEには有効です。） ■その他 htmlがいわゆるdiv病気味です。 #logoや#footerなどは、p要素で十分でしょう。あと、せっかくCSSを使っているのですから、
の連続や頭
はやめて、CSSでうまくコントロールした方がきれいなソースになります。以上、とりあえず気になったところを書きました。参考になれば幸いです。

TanakaHiro · Answer

多少なりともお役に立てたようで幸いです。

input要素の文字サイズ固定は、

input {
font-size: 12px;
}

みたいな感じで、ピクセル単位で指定します。

ほとんど画像ですので、bodyで指定しても良いでしょう。

IDなどの文字画像とフォームがずれるのは、ある程度しょうがないのですが、いっそのことテーブルで組んでしまうという手もあります。
マークアップという観点からも、テーブルで問題ないと思います。


私は、俗に言う「Strict病」でValid HTMLにこだわるもので、実のところもっとつっこみたいのですが（笑）、なんだかんだ言っても意図したとおりに表示するというのがHTML・CSSの面白みでしょうから、いろいろと試しながら頑張って下さい！

HTML・CSSコーディングが上手く行きません

ログインフォーム部分と背景画像を重ねたいという趣旨かと思いましたので、その趣旨で書きます。

この回答への補足

多少なりともお役に立てたようで幸いです。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング