- 締切済み
Safariで画像が出ません！
WinXPにてHPを作っています。 WinではIE7、IE6、NN7、FireFox、Opera MacではIE、FireFox、Opera、Safari で動作・レイアウトの確認をしています。 何故かSafariのみ、以下のタグを入れたページの背景画像が出ず真っ白な画面になってしまいます。 どこに間違いがあるのかさっぱりわからないんです… ご存知の方、教えて頂けるとありがたいです！！ 宜しくお願い致します。 タグ一覧↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <BASE target="_parent"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Imagetoolbar" content="no"> <meta name="robots" content="noindex, nofollow,noarchive"> <meta name="GOOGLEBOT" content="NOINDEX, NOFOLLOW, NOARCHIVE"> <TITLE>top</TITLE> <STYLE type="text/css"> <!-- BODY{ background-color : black; background-image : url("＊＊＊＊.gif"); background-repeat : no-repeat; background-position:25% 0%; } --> </STYLE> </HEAD> </HTML>
- nijiko1104
- お礼率87% (273/312)
- CSS
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- himajin100000
- ベストアンサー率54% (1660/3060)
英語版Win XP(VPC)上なのでなんとも言えないですが、 ファイル名を日本語にしたらIE 7で表示されている画像がSafariで表示されなくなりました。Mac版がどうかは知らないけど、もしかして・・・？
- himajin100000
- ベストアンサー率54% (1660/3060)
言うか悩んだけど Safari 3.0.1 Beta for Windows on WinXP Pro SP2(IE7 VPC) 上で再現しません。 BODY要素がなくともペイントで赤く塗りつぶしただけの510px*382pxのGIF画像ですが，正常に表示されています。 #ところで，BODY要素の開始タグと終了タグは省略できたはずなんですが、 <!ELEMENT BODY O O (%flow;)* +(INS|DEL) -- document body --> 何故かW3C Markup Validatorで Line 22 column 6: end tag for "HTML" which is not finished. といわれます。何ででしょう？(BODY要素があれば当然Valid)
お礼
ありがとうございました。
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
FireFoxじゃなくてFirefox。 http://www.mozilla-japan.org/support/firefox/faq#spell-abbreviate こういうものはちゃんと正しくHTMLやCSSを記述すれば問題を回避できるはずです。 http://openlab.ring.gr.jp/k16/htmllint/ http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ あとついでに言っておくとNetscapeは型が古くセキュリティ的に利用が望ましくないとされ、ウェブデザイン的にもかなりの足枷となるブラウザなのでスルーしても構わないと思います。 （リファラーに対してFirefoxなどへの移行を促す必要がありますけど…。）
お礼
ありがとうございました。 最初から、もう一度見直してみます。
関連するQ&A
- 文字化けを解決したい
サイトを持つ管理人です。タグなどについてはかなり初心者です。 iPhoneなどの海外OSから閲覧すると文字化けしてしまうという報告を受けて、タグを色々いじっています。 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">を追加してみたのですが、これ単品だと私のPCから閲覧したときに文字化けしてしまいました。 そのため<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">と<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">を並べてみたのですが、これで海外OSからも文字化けを起こさなくなったのでしょうか？ こんな感じのタグです↓ <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META NAME="GOOGLEBOT" CONTENT="NOINDEX, NOFOLLOW,NOARCHIVE"> <META NAME="ROBOTS" CONTENT="NOARCHIVE,NOINDEX,NOFOLLOW"> <meta name="viewport" content="width=380, maximum-scale=1.6" /> <title>練習</title> </head> 全てのスマホからもサイトを閲覧出来るようにするにはどうしたら良いでしょうか？それとも、全てのスマホから文字化けを防ぐことは不可能なのでしょうか？ お知恵をお貸しください。
- 締切済み
- ブログ
- safariだけcssが反映されない
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="base.css" type="text/css" media="screen,print" /> <title>あ</title> </head> <body> あ </body> </html> このhtmlはbase.css（以下）を読み込んでいます。 /* CSS Document */ @charset "Shift_JIS"; body { background-image: url(images/bg.jpg); background-repeat: repeat; } fire fox、operaでは背景画像images/bg.jpgが 表示されていますが、safariでは真っ白です。 index.html内に <style type="text/css"> <!-- body { background-image: url(images/bg.jpg); background-repeat: repeat; } --> </style> と記述してしまえば、safariでも当然のように反映されていますが、 これが外部ファイルになると反映されません。 今回の例は、おかしい部分を抽出してみたのですが、 bodyの背景が表示されない、一番上に10pxくらいの空白(マージン? )が生じるという不具合以外、他の要素はsafariでもちゃんと表示されていました。 floatを使ったページはsafariでは背景が表示されないと いう情報を得て、検査するために抽出してゆき、最後には こんなにシンプルになっても障害がとりのぞけないので、 どんな見落としがあるのか、教えて頂けないでしょうか？
- ベストアンサー
- HTML
- HTML5の構文について質問です。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex,nofollow,noarchive"> <title>私のホームページ</title> <link href="style.css" media="all" rel="stylesheet" type="text/css"> </head> 今まで4.1で組んでいたものですから若干の戸惑いがあります。 １．上記構文で足りないものはありますか？ ２．<meta http-equiv="Content-Style-Type" content="text/css">を入れると構文チェックでエラーになります。エラーになる理由を教えて下さい(テキストにはStyle-Typeを指定したほうが良いというようなことが書かれています)。 ３．HTML5とは関係がないですけれど<link href="style.css" media="all" rel="stylesheet" type="text/css">を</title>の後に記述するのはなぜでしょうか？ ビルダーからＤＷに乗り換えたばかりのHTML5を勉強中の作家です。
- ベストアンサー
- HTML
- CSSのアドバイスをお願いいたします。
<?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> .r { color : #407133; } .k { color : #336070; } .t { color : #454580; } .s { color : olive; } p { color : #222222; } body { background-color:#e0ffe0; } a:link { color : #0000ff; } a:visited { color : #003333; } a:hover { color : #660000; } a:active { color:#660066; </style> <meta http-equiv="Content-Script-Type" content="text/javascript" />の１行を加えてみました。 この場合の記述の是非。 また記述すべき個所は合っているのでしょうか。
- ベストアンサー
- HTML
- Safariで、Textareaのボーダーを消したい
Safari上で、TextAreaのボーダーを消したいと思い試行錯誤しております。 下記HTMLで、Windows IE6、IE7、FF2、Mac IE5 で うまくボーダーが消せるのですが、Safariがうまく消せません。 お分かりの方、ご教授いただけますでしょうか。 ※Appleのサイトは、Safariでもうまく消せているみたいなのですが、 ソースを見ても理解できませんでした。 http://www.apple.com/jp/ ▼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"> <title>test</title> </head> <body> <div style="background:#eeeeee; padding:10px;"> <form action=""> <input type="text" style=" border: 0; width:260px;"> </form> </div> </body> </html>
- ベストアンサー
- CSS
- xhtmlのスタイルシートについて
<?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <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" /> <style type="text/css"> t { color : 407133; k { color : 337060; r { coior : 454580 > </style> ↑どこか間違っているところがありましたら教えてください。 <span class="#407133">てすと</span> 文字色が変わりません。 どなたか指摘願います。
- ベストアンサー
- その他（インターネット・Webサービス）
- 検索避けのメタタグの数と効果
現在は、３個程度入れているのですが、とあるサイトで下記くらい入れることをオススメされていました。 <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <meta NAME="ROBOTS" CONTENT="NOINDEX"> <meta NAME="ROBOTS" CONTENT="NOFOLLOW"> <meta NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> <meta NAME="ROBOTS" CONTENT="NONE"> <meta NAME="robots" CONTENT="noindex"> <meta NAME="robots" CONTENT="nofollow"> <meta NAME="robots" CONTENT="noindex, nofollow"> <meta NAME="robots" CONTENT="none"> <meta NAME="LIBWWW-PERL" CONTENT="NOINDEX"> <meta NAME="LIBWWW-PERL" CONTENT="NOFOLLOW"> <meta NAME="LIBWWW-PERL" CONTENT="NOINDEX,NOFOLLOW"> <meta NAME="LIBWWW-PERL" CONTENT="NONE"> <meta NAME="libwww-perl" CONTENT="noindex"> <meta NAME="libwww-perl" CONTENT="nofollow"> <meta NAME="libwww-perl" CONTENT="noindex,nofollow"> <meta NAME="libwww-perl" CONTENT="none"> <META http-equiv="robots" content="noindex"> <META http-equiv="robots" content="nofollow"> <META NAME="GOOGLEBOT" CONTENT="NOINDEX, NOFOLLOW"> <META NAME="GOOGLEBOT" CONTENT="NOARCHIVE"> <META NAME="GOOGLEBOT" CONTENT="NOSNIPPET"> <meta name="robots" content="noimageindex"> <meta name="robots" content="noimageclick"> <meta name="Expires" content="August 31, 2003"> ３個程度と上のタグを全部入れるのとでは、やはり違ってくるのでしょうか？ 手間ではないので、効果があるのなら入れたいと思っています。 どうぞ宜しくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
- 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;} なにが問題なのかわかる方、教えてください。よろしくお願いします。
- ベストアンサー
- ブログ
- safariだけ、display:block;の周りの余白を消すことができず困っています
safariだけ、display:block;の周りの余白を消すことができず困っています。 cssでbr{line-height:0;}にしているのですが、safariだけリンクされない余白が間にできてしまいます。ie、firefoxでは大丈夫です。 たくさん調べましたがわかりません。よろしくお願いします。 以下ソースです。 <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a{display:block;height:100%;width:100%;line-height:200%;text-decoration: none;} a:hover{background-color:#ffcccc} br{line-height:0;} --> </style> </head> <body> <p> <a href="test">ああああああああああああ</a><br> <a href="test">ああああああああああああ</a><br> <a href="test">ああああああああああああ</a><br> </p> </body> </html>
- ベストアンサー
- HTML
- iPadのSafariでサイトが右側にはみ出る
いつもご丁寧な回答をありがとうございます。 iPad2を利用しています。 通常、iPadやiPhoneのSafariでは、ウェブサイトの横幅が、機種によって最適化され、ちょうど良い解像度になります（横スクロールする必要がない）。 しかし、私が自作しているサイトでは、なぜか右側がはみ出てしまい、すべて表示させるには、フリックしたり、ピンチインする必要が生じます。 簡略したコードは次の通りですが、何が問題でしょうか。 <!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"> <title></title> </head> <body style="background-image : url(cg/interface/hoge.gif);background-repeat : repeat-x;margin-top : 0px;margin-bottom : 0px;margin-left: 12px;margin-right : 12px;"> <div style="width:1200px;border:1px solid;">左右にマージンが空いて欲しい</div> </body> </html> div要素のwidth指定が大きすぎることが原因でしょうか。しかし、通常はそれでも最適化（縮小）されると思うのです。 ご回答、どうぞよろしくお願いいたします。
- 締切済み
- CSS
お礼
ありがとうございました。 ファイル名は全部英数です。 ちょっといろいろやってみます。