- ベストアンサー
Firefoxで見出しが上段にずれてしまいます。
- Firefoxで表示される<h1></h1>の部分が上の方にずれてしまう問題が発生しています。
- 対象のスタイルシートおよびHTMLのコードを変更してみましたが、問題を解決することができませんでした。
- Firefox以外のブラウザ（IE6.0やOpera）では正常に表示されることから、Firefoxのバージョンによる互換性の問題が考えられます。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
追伸 ちょっと修正 IE6.0とOperaであれば正常に表示されると書かれていましたが、おそらくそれらでもおかしな表示になっているはずです。 説明文の右となりに画像というレイアウトなのかなとやってみましたが、どうでしょうか、なお、Mac/Safari/Opera/Firefox、windows/IEでチェック済み <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; text-align: center; } #wrapper{ text-align: left; margin: 0px auto; padding: 20px; height: auto; width: 900px; float: left; color:#000000; border-width: 2px; border-style: solid; border-color:#000000; }/*Close!!*/ h1{ border-bottom: 1px solid #0000FF; border-left: 10px solid #0000FF; width: 100%; text-align: left; margin:0px; }/*Close!!*/ #contents { margin: 0px; padding: 0px; height: auto; width: 750px; float: left; color:green; border-width: 2px; border-style: solid; border-color:green; } #wrapper #contents #side{ } #contents #side{ margin: 0px 5px; padding: 0px; float: left; height: auto; width: 430px; color:red; border-width: 2px; border-style: solid; border-color:red; } #wrapper #contents #side P{ color:gold; padding:0px; margin:0px; border-width: 2px; border-style: solid; border-color:gold; } #contents #main{ margin: 0px; padding: 0px; float: right; height: auto; width: 300px; color:blue; border-width: 2px; border-style: solid; border-color:blue; } --> </style> </head> <body> <div id="wrapper"> <div id="contents"> <h1>名称</h1> <div id="side"><!--delete space front P AND EVERYWHERE--><P>説明文</P></div> <div id="main">JPEG画像</div> </div> </div> </body> </HTML>
その他の回答 (1)
- perlerz10
- ベストアンサー率40% (4/10)
CSSにおいても、HTMLの部分においてもカッコが閉じていなかったり、無駄なスペースが挿入されていたりと記述ミスが多いです。 各所にコメント書きしてあるので良く読んでこれまでのソースとよく見比べてみてください。 表示が思うように行かない際には、後付けのスタイルを消したり、各ブロック要素を色分けしたボーダーを入れてあげるとどこがどうなっているのか確認しやすいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <head> <style type="text/css"> <!-- body{ margin: 0px; padding: 0px; text-align: center; } #wrapper{ text-align: left; margin: 0px auto; padding: 20px; height: auto; width: 900px; float: left; color:#000000; border-width: 2px; border-style: solid; border-color:#000000; }/*Close!!*/ h1{ border-bottom: 1px solid #0000FF; border-left: 10px solid #0000FF; width: 100%; text-align: left; margin:0px; }/*Close!!*/ #contents { margin: 0px; padding: 0px; height: auto; /*width: 750px;*/ float: left; color:green; border-width: 2px; border-style: solid; border-color:green; } #wrapper #contents #side{ } #contents #side{ margin: 0px 5px; padding: 0px; float: left; height: auto; width: 430px; color:red; border-width: 2px; border-style: solid; border-color:red; } #wrapper #contents #side P{ color:gold; padding:0px; margin:0px; border-width: 2px; border-style: solid; border-color:gold; } #contents #main{ margin: 0px; padding: 0px; float: right; height: auto; width: 300px; color:blue; border-width: 2px; border-style: solid; border-color:blue; } --> </style> </head> <body> <div id="wrapper"> <div id="contents"> <h1>名称</h1> <div id="side"><!--delete space front P AND EVERYWHERE--><P>説明文</P></div> <div id="main">JPEG画像</div> </div> </div> </body> </HTML>
お礼
ありがとうございます！自分のHPを修正してみまして直っていることが確認出来ました。 非常に勉強になりました。この度はご丁寧にありがとうございました。