CSSで指定したイメージ位置がブラウザに正しく表示されない問題
- Windows7のブラウザ（IE8、Chrome、Sleipnir）でCSSで指定したイメージ位置が正しく表示されません。
- 他のPC（WindowsXP）では問題なくイメージが正確に表示されます。
- 修正したいが、padding-bottom:400pxと指定することで一応表示されるものの、スマートな解決方法を求めています。
- ベストアンサー
CSSで指定したイメージ位置がブラウザに正しく表示されません。
CSSで指定したイメージ位置がブラウザに正しく表示されません。 OS：Windows7 ブラウザ：IE8,Chrome,Sleipnir（どのブラウザも正しく表示されませんでした。） とりあえずHTML構文を表記します。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body{ color:#000000; background:#ffffff url("images/back.gif") repeat-x bottom; } --> </style> <title>9999</title> </head> <body> <h1>海沿いを走る青島線</h1> <p>都市と自然が共生するこの沿線は<br> 便利さと安らぎをあなたにお届けします。</p> <p>ひいらぎ不動産はこの街で<br> あなたの理想のお部屋探しをサポートします。</p> </body> </html> 問題はIE8にあると思い、 IE8をアンインストール（Windows7とIE8はセットのためアンインストール方法が通常と少し違いました。）しましたが、やはりだめでした。 ということはWindows7自体にCSSやHTMLのバージョンについて不具合があるのでしょうか。 ちなみに他のPC（WindowsXP）では問題なくイメージが正確に下に表示されます。 ※なんとか自己解決？はできたものの、達成感０です。 body{ color:#000000; background:#ffffff url("images/back.gif") repeat-x bottom; } を body{ color:#000000; background:#ffffff url("images/back.gif") repeat-x bottom; padding-bottom:400px; } と 修正したらなんとか本来あるべき位置に画像が表示されました。 最初は400pxじゃなく100%で指定したのですが、 画像がかなり下の方（ページ3個分ぐらい）に表示されてしまったため400pxに直しました。 ですが、やはりこれではすっきりしません。 もっとスマートな解決方法があるのではと思います。 どなたかご教授ください。
- mark28
- お礼率64% (44/68)
- HTML
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
どう正しくないのか、書いてないのでわかりませんが… ご提示の指定だとbodyの下に表示されるようで、Win XPではFF3.5、Opera10でもまんなかあたりに画像が表示されます。 background:#ffffff url("btn1.gif") repeat-x fixed bottom; で画面の下端（固定）になりますが、そういうことではないのかな？
その他の回答 (1)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
もしかして、ウィンドウの下部にだけ背景画像を並べたいとか? background:white url("images/back.gif") repeat-x fixed bottom; とbackcgound-attachment: fixed;を追加してみて下さい。
関連するQ&A
- 【CSS】Firebfox内でbackground-imageを使うって階層化すると・・・
IE６では正しく表示されるのに、FireFoxだとずれてしまうという問題について、ご教授ください。 CSSで２つのBOX（outboxとinbox）と定義します。 outboxの定義の中にinboxを配置します。 outboxの背景にbackground-imageをいれなければ問題ないのですが、いれるとinboxの位置がおかしくなってしまうのです。（outboxからのmarginが効かない）IEでは正しく（意図したように）表示されています。 ソースは以下です。 test.gifは、outboxのwidthとheightにあわせて作成するか、widthをheightを変更してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="ja"> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title>test page</title> <style type="text/css"> <!-- .outbox { margin-top:100px; margin-left:auto; margin-right:auto; width:449px; height:270px; background-image:url("test.gif"); background-repeat:no-repeat; } p.inputbox { margin-top:120px; margin-left:110px; } --> </style> </head> <body> <div class="outbox"> <p class="inputbox">aa</p> </div> </body> </html>
- ベストアンサー
- HTML
- IE以外のブラウザでも表示したい
文字をウィンドウ底面に合わせて動くレイアウトにした所、 Netscape・FireFox・Operaでは文字が消えて見れませんでした。IEでは普通に希望レイアウト通り見れています。 IE以外のブラウザ（最低限上記）でも見れるようにするにはどうしたらよいのでしょうか？ タグは以下のようになっていますがどこか間違っていたらご指摘お願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>menu</title> <style type="text/css"> <!-- BODY{ scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:black; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-track-color:#ffffff; background-color : black; background-image : url(logo.gif); background-repeat : no-repeat; background-attachment : fixed; position : fixed; } P{ font-family : Arial; font-weight : bold; color:#dcdcdc; position:absolute; bottom:0px; margin-left : 30px; } FONT{ font-size : 8pt; font-family :"ＭＳ ゴシック"; font-weight : normal; } --> </STYLE> </head> <body> <p align="center"> <a href="**.html" target="**">1</a><br> <br> <a href="**.html" target="**">2</a><br> <br> </p> </body> </html>
- ベストアンサー
- HTML
- CSSでアイコンを付けるとWin IE6でのみおかしくなってしまいます
下記のCSSコードでh2を装飾しています。 h2が長くなって改行が入った場合、Win IE6でのみ表示がおかしくなってしまいます。 「h2 a」に「float: left;」を追加してやるといちよう解決出来たのですが、もっと良い方法はないでしょうか。 よろしくお願い致します。 <html> <style type="text/css"> h2{ margin-bottom: 10px; padding: 2px 5px 2px 21px; color: inherit; background: #E6E6E6 url(images/icon_h2.gif) 5px 0.5em no-repeat; } h2 a{ padding-right: 23px; background: url(images/icon_link1.gif) right center no-repeat; height: 1%; } </style> </head> <body> <h2><a href="#">あああああああああああああああああああああああああああ</a></h2> </body> </html>
- 締切済み
- HTML
- CSSの画像位置
CSSを使ってある画像を完全に右によせたいと思っています。 CSSの場合下記のやり方で記せば右端によるはずなのですが、 何がいけないのか、1pxだけ空いてしまうのです。 本当にわずか1pxなのてすが、 （1pxというより1ドット？） とても気になります。 これの逆バージョン、左端よせは上手くいきました。 一体何がおかしいのでしょうか？ もし直らないなら、他に完全右寄せできる記述が ありましたら教えて下さい。 それはHTMLでも何でもかまいません。 <STYLE TYPE="text/css"> <!-- body { background: #ffffff; } p { position: absolute; top: 15px; right: 0px; } --> </STYLE>
- ベストアンサー
- HTML
- CSSで余白とパディングに”０”を指定したのに上部に余白ができてしまう
DREAMWEAVER8で作成しているのですが、ヘッダーの上部にCSSで背景としてグラデーション画像をいれてます。 そして、<h1>でロゴ画像を入れると何故かヘッダーのグラデーション背景の上に20ピクセルぐらいの空白が出来てしまいます。 IE6では空白がないのですが、FIREFOX2だと空きます。 分かる方いらっしゃったら教えて下さい。 ソースはこれです↓ 【html】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css" media="all">@import url("school2.css");</style> </head> <body> <div id="wrapper"> <div id="header"> <h1><img src="images/Logo03.gif" width="310" height="90" /></h1> </div> </div> </body> </html> 【css】 body { background: #E0FFCE; text-align: center; margin: 0px; padding: 0px; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 800px; border: 1px solid #009999; background: #FFFFFF; } #wrapper #header { background: url(images/Backheader3.gif) no-repeat; margin: 0px; padding: 0px; height: 120px; border-bottom: 6px double #009999; } #wrapper #header img { margin: 0px; padding: 0px; }
- ベストアンサー
- ホームページ作成ソフト
- [CSS]エラーの原因
以前CSSとテーブルについてご回答頂き、何とか勉強しつつ作業しております。 何とかここまで書いてみたのですが、どうしてもエラーが 出てしまいます。そもそもそれがどうしてエラーになるのかが理解できておらず(手探りな物で申し訳ございません) もしよろしければソースを見ていただけないでしょうか。 以下が問題のある部分です。 行番号: 10 Parse error - Unrecognized : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> <!-- BODY{ background-color : white;} TD { text-align : left; padding-top : 8px; padding-left : 220px; padding-right : 10px; padding-bottom : 0; font-size : 25px; font-weight : bold; color : black; text-decoration : none; background-image : url(wall0805-2.gif); line-height : 1.4cm; background-repeat : repeat-x; background-color : white; } IMG { background-color : white; text-decoration : none; color : black; }
- ベストアンサー
- HTML
- h1にタイトル画像を指定しているのですが・・
h1にテキストでは、ページのタイトルを入れて、CSSで背景を指定しています。 【HTML】 <div id="header><h1>タイトル</h1></div> 【CSS】 #header h1{ text-indent: -9999px; background-image: url(../images/share/title.gif); background-repeat: no-repeat; height: 43px; width: 317px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; text-align: left; } FirefoxとIEでは表示されているのですが、Operaで見ると表示されていません。Operaで表示させることは難しいのでしょうか？
- 締切済み
- HTML
- CSSのbackground-imageが表示されません
CSSのbackground-imageが表示されません 恐れ入ります。現在CSSを勉強しつつサイトを作成しているのですが 2カラムの枠組みにて containerボックスの中にsidewrapとmainwrapを配置し、 サイトを表示してみるとcontainerボックス中にて設定をしたbackground-imageが表示されません。 確認は以下のブラウザにて確認してみました。 ○background-image表示されない ・firefox(最新ver) ・IE8 ○background-imageが表示される ・IE6 いろいろ試してみた所mainwrap中のfloat: rightをコメントアウトしたら IE8等でもbackground-imageが表示されるみたいなのですが・・・ 解決法などご存知の方がいらっしゃいましたらお教えいただけませんでしょうか。 CSSの設定は以下のようになってます。 #header{ width:800px; background-color:#ffffff; } #container{ width:800px; background-image: url(img/back.jpg); background-repeat: repeat-y; } #sidewrap { width: 190px; float: left; margin: 0px auto; text-align: left; } #mainwrap { width: 600px; float: right; text-align: left; } #footer{ clear:both; width:800px; text-align: center; border-top: 3px solid; border-bottom: 1px solid; } 以上 よろしくお願いします。
- ベストアンサー
- HTML
- <css> ボックスの隙間について
お時間のあるときに教えていただけるとありがたいです。 cssボックスを縦に二つ（上A、下B）作ったところ、どうしてもボックスに隙間が空いてしまいます。この隙間をなくし、二つのボックスを繋げるように表示するにはどうしたらいいでしょうか。どうもマージン設定がうまくいっていないようなのですが、どこが悪いのかわからなくて困っています。 cssは外部ファイルとして読み込みました。以下にソースをなるべくそのまま貼り付けてみます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜cssソース＞ body{ color : #fff; font-size : 11pt; text-align : left; background-color : #ff00cc; background-image : url(haikei.gif); background-repeat : repeat; } a{ color : #ffcccc; text-decoration : none; } a:HOVER{ color : #ffcccc; text-decoration : none; } a:VISITED{ color : #ffcccc; } * { margin:0px; padding:0px; } #boxA { margin:0px auto; width:650px; height:217px; padding:0; } #boxB { text-align:left; margin:0px auto; width:620px; height:350px; padding:15px 15px 5px 15px; background-image : url(haikei2.gif); background-repeat : repeat; overflow:auto; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜htmlソース＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <link rel=stylesheet type="text/css" href="haikei.css"> </head> <body> <div id="boxA"> </div> <div id="boxB"> </div> </body> </html> よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- CSSでIE6だけ出る隙間をなくしたい
お世話になります。 CSSとtableを組み合わせてレイアウトをしています。 WindowsのIE7やSafari、Netscapeでは正常に表示されるのですが、 IE6では<div>と<div>の間に1、2pxの白い隙間が出てしまいます。 htmlは下記にアップしています。 http://www.couleurcafe.jp/08/ ホーム、メニューといったメインメニューの行と、 赤地に白文字のヘッダーメニューの行の間に隙間が出てしまいます。 CSSは以下の通りです。 @charset "Shift_JIS"; body { margin: 0; padding: 0; background-image: url(img/bodybg.gif); } #wrapper { width: 780px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; text-align: left; background-color: #FFFFFF; } #mainmenu { background-image: url(img/menubarbg.gif); background-repeat: repeat-x; width: 766px; height:29px; margin-left: 14px; margin-bottom:0px; padding-top:1px; } #menublock { background-image: url(img/menubg.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #000000; text-align: center; height: 16px; padding-top: 12px; } #menublock_over { background-image: url(img/menubg_over.gif); background-repeat: no-repeat; width: 88px; height:29px; font-size: 12px; color: #FFFFFF; text-align: center; height: 20px; padding-top: 8px; } #headermenu { background-color: #E10C0A; width: 772px; height: 12px; font-size: 11px; color: #FFFFFF; text-align: right; padding: 4px; } この隙間をなくす方法はないでしょうか。 CSSのおかしいところがあればご指摘をお願いいたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
