- 締切済み
回避方法を教えて下さい
１カラムで、 Another HTML-lint gateway で確認した所タグに問題はありませんでした。 Mozilla Firefoxで見た時でＣＳＳが一部反映されていない部分があります。 Mozilla Firefoxでも反映させたいのですが、 こんな現象の回避方法を教えて下さい。 <div id="main"> 内容・・・・・ </div> #main{ background-image:url(img/back.gif); background-repeat:repeat-y; } back.gifという白い罫線を繰り返し表示させて、背景にしています。 これが、Mozilla Firefoxだと途中で切れて（表示されなくなって）しまいます。 Google ChromeもInternet Explorer8も問題ないので、 Mozilla Firefoxでだけ起こるみたいです。 ＣＳＳのサイズが7ｋｂもありますが、これは関係ありますか？ すみません、どなた様かご存知の方いらっしゃいましたら、よろしくお願い致します。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- lilillllililili
- ベストアンサー率71% (23/32)
コードだけ見ると問題は無さそうですので、他の部分に原因があるのではないでしょうか。 簡単なサンプルがありましたので掲載しておきます。 一度新規ファイルで試してみて、正常に表示されるようでしたら原因は他のCSSプロパティにあります。一度見なおしてください。 <style> body { background: #CCD6D9 center; margin: 10px 0px; padding: 0px; } .box{ padding: 0px; width: 500px; border: 2px solid #6699FF; margin-right: auto; margin-left: auto; background: #FFFFFF; } .note { font-size:12px; background: url(note.gif) repeat 0px -23px; margin: 20px; padding: 0px 0px 1px; } .note p{ line-height:24px; margin-top:24px; } </style> <body> <div class="box"> <div class="note"> <p> ●タイ伝統古式マッサージ</p> <p>65分コース 5,000円<br> 95分コース 7,000円<br> 125分コース 9,000円</p> <p>●タイ式リフレクソロジー</p> <p>35分コース 3,500円<br> 65分コース 6,000円</p> <p>●アロマオイルトリートメント</p> <p>65分コース 7,000円<br> 95分コース 10,000円<br> 125分コース 13,000円</p> </div> </div> </body>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
多分、Opera,Safariでも同様に・・ 問題は、floatと、要素の高さが指定されていないこと。 なお、HTMLをAnother HTML-lint gatewayで調べても、それはわからない。CSSチェッカー( http://jigsaw.w3.org/css-validator/#validate_by_input )でも、多分わからない。 それは、文法の間違いではなく、指定方法の間違いですから。 見出しを<p></p>で括ってもそれが正しいか間違いかはわからないのと同じです。 #main{height:400px !important;}と、最後にでも書いてみると400pxだけ背景が指定されるはずです。
お礼
ありがとうございました
補足
１カラムなので、floatは使用しておりません。 #main{height:400px !important;} といれたら、 ただただ、反映されずに、下に伸びました・・・。 何か他にございませんでしょうか
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
質問文に書かれているコード以外の場所に原因があると思います。 原因となる部分をうまく調整すれば、期待通り表示されるようになると思います。
お礼
ありがとうございました
お礼
ありがとうございました。
補足
ＣＳＳの重さは関係ありますか？ 7ｋｂ→4ｋｂまで減らしたらなんの問題もありませんでした。 またはＣＳＳは7ｋｂのままでＨＴＭＬ内容を半分に減らしたら、やはり問題ありませんでした。 ＣＳＳが重かったり、ＨＴＭＬの内容がものすごーーーーーーーくあったり（41ｋｂ）すると、画像が途中で切れてしまう・・・って現象が起こるのでしょうか？ ・・・・でもどちらも減らせないので、何か解決作が欲しかったのですが・・・ どなた様か詳しい方いらっしゃいますか？？ コードをご提示頂きありがとうございました。