- 締切済み
ＷＩＮのＩＥ６でボックスに指定した背景画像が表示されません
外部リンクのCSSでボックスに背景画像を表示させたいのですが、ウィンドウズのIE６では表示されません。記述がおかしいのでしょうか？タグは以下の通りです。ほとほと困り果てております <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>タイトル</title> <link rel="stylesheet" href="eps.css" type="text/css"> </head> <body> <div class="outer"> <p>内容を書き入れます</p> </div> </body> </html> 外部リンク .outer{ position: absolute; top: 0px; bottom: 0px; left: 80px; width:650px; background-image: url("back-sen.jpg"); padding: 0px; margin: 0px auto; }
- kimci
- お礼率75% (6/8)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- s_hukami
- ベストアンサー率66% (98/148)
他のブラウザでは閲覧できますか。 画像のURLは正しいですか。 この場合、外部CSSと同じディレクトリ（フォルダ）にback-sen.jpgが無ければ背景画像が表示されません。 例えば「images」というフォルダの中に画像が保存されている場合には、「background-image: url("images/back-sen.jpg");」になります。 あとあり得るのは、「CSSのファイル名が混じっている（あるいは同名に見えるが全角文字が混じっている）」「全角スペースがCSSのソースコードに含まれていて、それ以降の指定が反映されていない」などです。 たまたまかも知れませんが、サンプルのソースの「margin:」の後に、全角スペースが含まれています。 メモ帳でHTMLやCSSを記述しているのであれば、Winなら「EmEditor（フリー版）」「Sakura」「Terapad」などのテキストエディタ、Macなら「mi」というテキストエディタがおすすめです。 文字の色分け表示の他、空白なども表示してくれます。
関連するQ&A
- 背景色を指定したのに反映されません。
CSSは外部ファイルに記述しています。 画像のように色をつけたいのですが、うまくいきません。 上端から150pxです。テキスト・画像を表示しないで背景色のみの表示もできますでしょうか? ・HTML <body>間のみ ※<head>間に<link rel="stylesheet" href="sample.css" type="text/css">の記述はあります。 <body> <div class="color1"><p class>文字など（できれば入れない）</p></div> </body> ・CSS（sample.css） <style type="text/css"> div.color1 { width: 100%; height: 150px; color: black; background-color: blue; } </style> 同じ階層?に両ファイルはあります。
- ベストアンサー
- CSS
- IEとその他のブラウザの表示
よろしくお願いします 現在、2段落の段組をCSSで行っています 但し、1段落目と2段落目にはマージンを指定しています そこで質問なのですが どこかのサイトでfloatとmarginは一緒に指定しないほうが良いというのを見たので --------------------------------- style.css --------------------------------- div.box_left_outer{ width: 300px; background-color: #FFF9E5; float: left; } div.box_left{ width: 260px; margin: 20px 20px 20px 20px; } div.box_right_outer{ width: 310px; float: left; } div.box_right_outer2{ width: 300px; margin-left: 10px; background-color: #FFF9E5; } div.box_right{ width: 260px; margin: 20px 20px 20px 20px; } --------------------------------- test.html --------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div class="box_left_outer"> <div class="box_left"> テキスト </div> </div> <div class="box_right_outer"> <div class="box_right_outer2"> <div class="box_right"> テキスト </div> </div> <body> </html> という風に書いているのですが IEだと意図した表示になるのですが Firefoxやその他のブラウザだと右側の段組のマージンの箇所が 1つ上のdivについている感じになります Firefoxなどでも同じ表示にするにはどうしたらいいでしょうか？ よろしくお願いします
- ベストアンサー
- HTML
- ダブルクリックすると画像が
SafariやOperaで下記htmlの<div id="outer"></div>の部分をダブルクリックすると画像が全体的に青くなるのですがダブルクリックしても青くならないようにするにはどうすればいいのでしょうか <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #outer { position: absolute; background-color: #FF33CC; width:280px; height:280px; } </style> </head> <body> <img src="./tes1t.jpg" alt=""> <div id="outer"></div> </body> </html>
- 締切済み
- CSS
- z-indexを指定したボックスの下に表示させる
z-indexとjavascriptを組み合わせて下記のようなページを作っています。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ああああ</title> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- function MM_showHideLayers() { //v9.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> <style type="text/css"> div#aaa { z-index: 2; position:absolute; width: 300px; } div#bbb { z-index: 1; position:absolute; width: 300px; } </style> </head> <body> <h1>あああ</h1> <p><a onclick="MM_showHideLayers('aaa','','show','bbb','','hide')">ううう</a> / <a onclick="MM_showHideLayers('aaa','','hide','bbb','','show')">えええ</a></p> <div id="aaa" style="visibility:visible"> <h2>ううう</h2> <p>うううううううう<br /> うううううううう</p> </div> <div id="bbb" style="visibility:hidden"> <h2>えええ</h2> <p>えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ</p> </div> <p>いいいいいいいいい<br /> いいいいいいいいい</p> </body> </html> 切り替わるdivの下に<p>いいいい</p>を表示させたいのですが、後ろに回って表示されません。 これを表示させる方法をご存じでしたら教えてください。
- ベストアンサー
- HTML
- CSSで設定した背景画像がFirefoxだとズレて表示されます
以下のように、CSSを設定しました。 -- CSSの内容(抜粋) ------------------------------- H2{ color:#333333; background-image:url(img/title-01.jpg); background-repeat:repeat-x; padding:3px 25px; font-family:"Lucida Sans"; font-size:medium; } -- HTMLの指定 ------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <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>タイトル</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="info-area"> <h2>いろはにほへと</h2> ←問題なくタイトル文字の後ろに背景画像title-01.jpgが表示されている <div></div> <div></div> </div> <div id="main-area"> <h2>ちりぬるをわか</h2> ←大幅に上方にズレて表示される <div></div> <div></div> </div> …以下省略… CSSは外部読込にしてあり、HTML内には幅や高さ，色などを指定するタグは一切ありません。 問題の部分に到達するまでのタグは なお、上記の指定方法でInternetExplorer6.02とSleipnir2.8.5では 問題なく表示されています。 表示が崩れたFirefoxは3.0.11です。 Firefoxでも意図したように表示される方法はありますか？
- ベストアンサー
- CSS
- ieでだけ背景画像が表示されません
internet explorerのすべてのバージョンにおいて、背景画像が反映されません。firefoxやopera、safariでは問題なく反映されます。 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-type" content="text/html;charset=Shift_JIS"> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body background="haikei.jpg"> てすと </body> </html> CSS: body {font-family:"ＭＳ Ｐゴシック";background-image:url(haikei.jpg);background-repeat:repeat;} なにが問題なのかわかる方、教えてください。よろしくお願いします。
- ベストアンサー
- ブログ
- IE6で表示がずれて困っています。
IE6で表示がずれて困っています。 firefox・IE８では表示されるのに、IE6ではずれてしまいます。 質問したい事が２つあるのですが、 １つ目は インラインフレームでIE６だけサイズが大きくなる。 原因とサイズの揃え方を教えて下さいm(__)m 画像添付とソースをはります。 <!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="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <p><img src="images/news.gif" width="490" height="29" /></p> <iframe src="news.html" id="newsi" frameborder="0" scrolling="auto"></iframe> </div> </body> </html> ●CSS● *{ margin: 0; padding: 0; } div{ width:490; height:200; } #newsi{ width: 486px; height: 150px; border: 2px #F96 solid; } --------------------------------------------------------- 一つ目は以上です。 二つ目もここにで質問したかったのですが、文字数が足りないためもう一度質問させていただきますm(__)m 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いいたしますm(__)m
- ベストアンサー
- HTML
- IEだと背景透明テーブル内の文字が見れない
dreamweaverMXを使ってHPを制作しました。 firefoxだと表示されるのですが、IEだと透明なテーブル内の文字が表示されません。以下、ソースです。 <!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-Script-Type" content="text/javascript"> <meta http-equiv="Content-Script-Type" content="text/css"> <meta name="keywords" content="○○"> <title>○○</title> <style type="text/css"> <!-- body { background: url(../sozai/haikei_info_05.gif) fixed; } p { line-height: 150%; } </style> <link href="../scrollber.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="50" topmargin="50"> <table width="400" border="0" cellpadding="10" cellspacing="0" style="filter:alpha(style=0,opacity=0)"> <td height="441" nowrap><p align="left"><font size="-1">文章文章文章</font></p></td> </table> </body> </html> 外部CSSでスクロールバーも変えているのですが、こちらはIEは表示されてもfirefoxではデフォルトになってしまいます。 よろしくお願いいたします。
- ベストアンサー
- HTML
- フッターを固定したい…
上の写真のようにDivを組んでいるのですが、 Div4のフッタをブラウザに固定して表示したいのですが、どうすればよろしいのでしょうか? Div4はCSSでbackground-imageとして画像(jpg)が指定されています。 ●html <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <link rel="stylesheet" href="design.css" type="text/css"> <style type="text/css"> </style> </head> <body> <div id="body"> <div id="main"> <div id="div1"> <p class="clip"> <img src="clip.jpg"alt="New clip!"> </p> <p class="b-design"> <a href="design.html"> <img src="b-design.jpg"> </a> </p> <p class="b-photo"> <a href="photo.html"> <img src="b-photo.jpg"> </a> </p> <p class="b-mail"> <a href="mailto:a@com"> <img src="b-mail.jpg"> </a> </p> </div> <div id="div2"> </div> <div id="div3"> </div> </div> <div id="div4"> </div> </div> </body> </html> ●CSS * {margin:0; padding:0} body {background-color:black; width:100%;} img {border-style:none} #body {position:relative; margin: 0 auto; width:800px} #main {} #div1 {float:left; width:330px; height:370px; background-image:url("div1.jpg")} #div2 {float:left; width:470px; height:370px; background-image:url("div2.jpg")} #div3 {float:clear; width:800px; height:800px; background-image:url("div3.jpg")} #div4 {float:clear; width:800px; height:210px; background-image:url("div4.jpg")} .clip {position:absolute; top:30px; left:20px} .b-design {position:absolute; top:290px; left:30px} .b-photo {position:absolute; top:320px; left:30px} .b-mail {position:absolute; top:350px; left:30px}
- ベストアンサー
- HTML
- CSSで画像配置の垂直方向指定
画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。 縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。 タグはそれぞれしたのようなかんじです。 *****************CSS***************** #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { font-size : 0.9em; margin : 0; padding : 10px 0 10px 0; float:center; width : 800px; border-bottom:2px solid #CFDEEF; } .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } *****************HTML***************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> <style type="text/css"> body { background: transparent; } </style> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="right-img"><img src="017.jpg" border="0"></div> </body> </html> よろしくお願いします。
- ベストアンサー
- HTML
補足
回答ありがとうございます！スペース、気付いてませんでした(^^;)早速スペースを直しました。ついでに念のため外部リンクさせるCSSのファイル名も変更してみました。 が、やはりボックス内の背景画像だけが表示されません。画像でなく「background-color: ;」を設定すると、そちらはWinのIE6でも表示されます。 それから、自分が確認できる範囲で分かったことなのですが、MacのIE5とSafariでは表示され、WinのIE6とMacのFireFoxでは表示されないことが分かりました。 最後になりましたがお勧めして頂いたソフト、早速ダウンロード致しました。とっても使いやすいです！本当にありがとうございます。これを使って、もう一度外部リンクを作り直してみます。