- 締切済み
回避方法を教えて下さい
１カラムで、 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)
- 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/2281)
質問文に書かれているコード以外の場所に原因があると思います。 原因となる部分をうまく調整すれば、期待通り表示されるようになると思います。
お礼
ありがとうございました
関連するQ&A
- 背景イメージの重ね表示
こんにちは。 MTを使ってテンプレートを作っているのですが、サイドバー全体の背景の上に、別な背景を表示させようとしています。 例えば以下のようなかんじです。 <style type="text/css"> .bg { background-position: left; background-repeat: repeat-y; background: url("./img/bg.gif"); } .fg { padding-bottom: 100px; background-position: bottom; background-repeat: no-repeat; background-image: url("./img/fg.gif"); } </style> ： ： <!-- ▼サイドバー▼ --> <div class="bg"> <div class="fg"> ： ： </div> </div> <!-- ▲サイドバー▲ --> IE だと全体の背景が前面にでてしまい、ホントは前面に表示されて欲しい別な背景が消されてしまい困っています。※Firefox などでは問題ない。 サイドバー全体の背景の上に別な背景を表示させたい場合には、どのようにすればいいのか教えください。 よろしくお願いします。
- ベストアンサー
- ブログ
- div入れ子の背景画像
【CSS】 #layout{ width:755px; margin:auto; background-color:#ffff00; background-image:url(img/back.gif); background-repeat:repeat-y;} #menu{ width:168px; margin:0px; padding:0px; float:left;} #main{ width:570px; background-color:#ffffff; padding:0px 0px 0px 10px; float:left;} 【html】 <div id="layout"> <div id="menu">メニュー</div> <div id="main">メイン</div> </div> レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、 上記のCSSだとIEはOKなのですが、foxが表示されません。 メニューidにはデザイン上背景画像は設定できません。 また、 <div id="layout"> あああ </div> を試したら背景画像が表示されましたので、パスの間違いはありません。 どうすれば良いでしょうか？ 知恵をお貸しいただけますでしょうか。 宜しくお願い致します。
- ベストアンサー
- HTML
- ボックスに背景を指定した時、firefoxでうまく表示されない
CSS初心者です。 タイトルの通りなんですが、ボックスにbackground-imageで背景を指定して、ブラウザで表示させると、IE6.0だとちゃんと表示されますが、firefoxだと表示されません。 サンプルソースを書きます。 -HTML- <div id="formbox"> <div id="box01">テストテスト</div> </div> -CSS- #formbox{ background-image: url(./img/bg.gif); background-repeat: no-repeat; width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; background-color:skyblue; float:left; } どなたかご教授お願いできませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- CSS
- 画像の表示方法について
画像の表示方法について 画像に関してですが、HTMLの中にimgでマークアップするより、cssで画像を指定した ほうがいいとある書籍に書いてありました。しかし、実際の方法が具体的に記載されて いませんでした。 それで考えたのですが、以下のように<div></div>で範囲を決めて、その背景画像に 画像を指定すればよいと思いました。 その際に、<div>と</div>の間には何も入らなくてもいいのでしょうか？ つまりこういうことです。 <div id="photo"></div> css #photo { background-image: url(image/photo01.gif); background-repeat: no-repeat; width: 240px; height: 180px; } これで240×180の写真が出せると思いますが、中に何も入らないのは文法上 いいのかどうか分かりません。 知人に聞いたら、適当にテキストを入れて、それをcssのtext-indentで表示を 消したらいいと言われました。つまり下記の通りです。 <div id="photo">photo1</div> css #photo { background-image: url(image/photo01.gif); background-repeat: no-repeat; text-indent: -9999px; ←これでテキストをかなたに飛ばす width: 240px; height: 180px; } HTML、cssについては、独学で本などで学んでいるため、聞きたいことが聞けずに 困る時があります。上記のものもその一つです。 この質問と共に、ついでで申し訳ありませんが、伺いたいのですが、Webマスター たちが集まって、お互いに質問したり答えあったりするサイトや掲示板などが あったらお勧めのものを教えてください。何卒、よろしくお願いいたします。
- ベストアンサー
- HTML
- cssのmarginについて教えてください
cssのmarginについて教えてください cssを使い、一般的な1カラムのサイトを制作しています。 外枠を組む所までは上手く行ったのですが 中身を入れるとfirefoxで表示した時、上部分に変な余白が出てしまいました。 IE7では問題なく表示されます。 色々と試した結果、中の要素のmargin（下記におけるdiv#header pの部分）が 外枠にも影響を及ぼしているんだろうと予測しているのですが、対処方法が解りません。 （この場合、headerの上部に30pxの空白が出来てしまいます。main等で試しても同じことになりました。） marginを0にする、または<p>や<div>で囲わずに「あいうえお」と書けば余白は出ないのですが、そういう訳にもいかず・・・。 試しに<h1>で囲んだり、idではなくclassで囲んでみたりしたのですが結果は変わらず、 <div>ではなく<span>で囲むと余白はでない変わりにmargin自体が無効状態になってしまいました。 それともこういう場合、div#header p部分のmarginがdiv#headerにも適用されるのは当たり前の事で、私の考え方が間違えているのでしょうか？ div#header pのmarginが影響してるのだとしても、上にだけ影響が出て左右には影響がないことにも首をひねっています。 独学でやってきたので曖昧な部分が多く、質問も上手く文章に出来ず申し訳ないのですが 詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。 ---------------------------------------------------------------------- div#box {background-color: #ffffff ; width : 850px ; margin : 0 auto ; min-height: 100% ; position:relative ;} div#header {background-image: url(image/back-header.gif) ; width : 850px ; height : 90px ;} div#menu {background-image: url(image/back-menu.gif) ; width : 850px ; height : 45px ;} div#main {background-image: url(image/back-main.gif) ; background-repeat: no-repeat ; background-position: top ; width : 850px ; padding-bottom: 25px ;} div#footer {background-image: url(image/back-footer.gif) ; width : 850px ; height : 25px ; position: absolute ; bottom: 0px ; } --------------------------------------------- div#header p {font-size : 0.9em ; margin: 30px ;} ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <div id="box"> <div id="header"><p>あいうえお</p></div> <div id="menu">省略</div> <div id="main">省略</div> <div id="footer">省略</div> </div>
- ベストアンサー
- HTML
- 背景画像を2枚使いうまく繰り返す方法
htmlとcssでホームページを作っています。 背景画像を2枚使用しているんですが、どうしてもうまく表示されません。 1枚目はページ上部に。 2枚目はその下からすべて。 で、それぞれ横にリピート。 2枚目だけ縦にリピートして表示させようとしてます。 最初はbodyとdivで -------------------css-------------------------- body { background-image:url(""); background-repeat:repeat; } div.body { background-image:url(""); } ----------------html-------- <body> <div class="body"> 内容 </div> </body> --------------------------------------------- としています。 ですが、これだとdivのボックスができてしまい、横に無限に繰り返されないことになります。画面を縮小した時に切れてしまいます。 なので、htmlとbodyにそれぞれ背景をつけたんですが、 今度は両方の画像が表示されませんでした。 html { background-image:url(""); background-repeat:repeat-x; } body { background-image:url(""); } htmlのほうを消すと、bodyで指定した画像が縦横無限に繰り返されます。 htmlを消さずにbodyを無限に表示されるにはどうしたらいいですか？
- ベストアンサー
- HTML
- Firefoxのみ下に空白が出来るバグ
背景を２枚使用し、それぞれ上と下に固定して、本文がのびると真ん中（画像のない場所）がのびるようにしたいのですが、 Firefoxのみ、下の画像に空白ができて埋まりません。 画像は、bodyに下の画像を、containerに上の画像を入れています。 いい方法はないでしょうか？ ----html------------------ <html> <body> <div id="container"> </div> </body> </html> ---css------------------ body{ background-image:url(../images/back_01.jpg); background-repeat:repeat-x; background-position:bottom; margin:0 auto; height:100%; } div#container { background-image:url(../images/back_02.jpg); background-repeat:repeat-x; width:100%; height:100%; margin:0 auto; text-align:center; } ちなみにhtmlにcssでheight：100％などを入力すると、画像が消えて表示されなくなります。 よろしくお願いします。
- ベストアンサー
- CSS
- 上下にイメージをリピートさせたい
よく見ますが、下記サイトの様にtopとbottom（ヘッダーとフッター）にbackground-imageを無限にループするイメージ（カラー） ってcssでどう指定したら出来るのでしょうか。 左右にスペースが出来てしまったりで上手くいきません。 http://www.deviantart.com/ http://www.good.is/ http://www.postbox-inc.com/ ----------------html--------------------- <body> <div id="container"> ・ ・ ・ </div> <div id="footer> </div> </body> ------------------css---------------------- body { background-image: url(img/bg1.gif); background-repeat: repeat-x; } div#footer { background-image: url(img/bg2.gif); background-repeat: repeat-x; } ではだめですよね・・・ なるべくシンプルなソースがいいのですが、 お助けください。
- 締切済み
- CSS
- 携帯端末での画像のリピートについて
モバイルサイトを作成しています。 そこで画像をリピートしてラインとして表示させたいのですが、 <div style="background-repeat: repeat; background-image:url(/images/test.gif);"> といったかたちで記述してもdocomoでは表示されないため困っています。 docomoでもrepeatを反映させ、背景画像を表示するにはどうしたらいいでしょうか。
- ベストアンサー
- CSS
- 文字の両側に画像を配置するCSSのやり方
●AAAAA● ●BBBBB● ●CCCCC● 上記のように文字の両側に●画像をCSSにて配置したいのですが。 HTML <div class=R> <a href=".html">AAAAA</a> <a href=".html">BBBBB</a> <a href=".html">CCCCC</a> </div> CSS div.R a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: left center; margin-right: 12px; padding-left: 7px } この状態では、左に●は表示されるます。 もうひとつ重ねればとおもい <div class=R>の中に<div class=R2>なるものを配置し、 div.R2 a { background-image: url("●.gif"); background-repeat: no-repeat; background-position: right center; margin-left: 12px; } を重ねてみたんですが、うまくいきません。 右にも表示させてい場合は、どのような記述にすれば表示されるのでしょうか？
- ベストアンサー
- CSS
お礼
ありがとうございました。
補足
ＣＳＳの重さは関係ありますか？ 7ｋｂ→4ｋｂまで減らしたらなんの問題もありませんでした。 またはＣＳＳは7ｋｂのままでＨＴＭＬ内容を半分に減らしたら、やはり問題ありませんでした。 ＣＳＳが重かったり、ＨＴＭＬの内容がものすごーーーーーーーくあったり（41ｋｂ）すると、画像が途中で切れてしまう・・・って現象が起こるのでしょうか？ ・・・・でもどちらも減らせないので、何か解決作が欲しかったのですが・・・ どなた様か詳しい方いらっしゃいますか？？ コードをご提示頂きありがとうございました。