- ベストアンサー
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では背景が表示されないと いう情報を得て、検査するために抽出してゆき、最後には こんなにシンプルになっても障害がとりのぞけないので、 どんな見落としがあるのか、教えて頂けないでしょうか？
- takeetakee
- お礼率66% (96/144)
- HTML
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
試して見たけど最初は再現できなかった。 で、もしやと思って > /* CSS Document */ このコメントの部分もCSSファイルに書いたら再現しました。 @charset は先頭に書かなければ行けないので コメントも書いちゃだめなんでしょう。 コメントか@charsetのどちらか消してください。
関連するQ&A
- スタイルシートが反映されません。
本の通り、スタイルシートを記述しましたがIE5.5では背景が反映されず NN4.75ではHTMLの内容までも消えて、何も表示されません。 htmlファイルのすぐ上のimagesフォルダにbggreen.jpgを入れてあり、 ディレクトリは間違いないと思うのですが、何がおかしいのかわかりません。 よろしくお願い致します。 <TYPE="text/css"> <!-- body { background-image: url('images/bggreen.jpg'); background-repeat: repeat-y } --></STYLE>
- ベストアンサー
- HTML
- CSSレイアウトでの中央寄せ
おせわになります。 bodyに背景画像を指定し、CSSで中央寄せをしているのですが、 動作確認でブラウザ幅をこまかく拡大・縮小を繰り返すと、 背景画像とコンテンツ部とが1pxずれる事があります。 Win IE6.0、7.0、MacOSX safari2.0でこの現象がおき、FF2.0はWin&Macともに問題ありません。 この解決方法はありますでしょうか。 ご教授のほど、よろしくお願いいたします。 ▼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"> <!-- body { margin:0; padding:0; text-align:center; background: url(http://www.geocities.jp/ajax3210/bg.gif) center top repeat-y; } #wrapper { width:746px; height:100px; background-color: #CCCCCC; margin-left:auto; margin-right:auto; text-align:left; } p { margin:0; padding:0; } --> </style> </head> <body> <div id="wrapper"> <p>テスト</p> </div> </body> </html>
- ベストアンサー
- HTML
- 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>
- 締切済み
- CSS
- CSSでロールオーバーボタン。IEで表示されるようにするには？
CSSでロールオーバーボタンを作っています。 Firefoxだと問題なく表示されるのですが、IEだとロールオーバーしてくれません。 どのように修正すればよいのでしょうか？ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * <!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"> <!-- body { font-family: ＭＳ Ｐゴシック, Osaka, ヒラギノ角ゴ Pro W3; color: #FFFFFF; background-color: #c5003f; background-image: url(../images/bg.jpg); background-repeat: no-repeat; margin:0; padding:20px; } #fsize { float:right;} #fsize div { margin:0; } #fsize a { display:block; background-repeat:no-repeat; } #fsize a img { border:none; } #fsize_l { background-image:url(../images/b_fsize_l_f2.jpg); float:left; } #fsize_m { background-image:url(../images/b_fsize_m_f2.jpg); float:left; } #fsize_s { background-image:url(../images/b_fsize_s_f2.jpg); float:left; } #fsize a:hover { background-color:#FFFFFF; } #fsize a:hover img { visibility:hidden; } --> </style></head> <body> <div id="fsize"> <div><a id="fsize_l" onclick="document.body.style.fontSize='large'"><img src="../images/b_fsize_l.jpg" alt="*" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='small'"><img src="../images/b_fsize_m.jpg" alt="*" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='x-small'"><img src="../images/b_fsize_s.jpg" alt="*" width="29" height="25" /></a></div> </div> </body> </html>
- ベストアンサー
- HTML
- Operaでズレない方法をご指導下さい
IE6、firefox1.5ではズレないのですが、 Opera9.1.0では <div id="main">テキスト</div> の箇所が左に1pxズレてしまします。 ブラウザの横幅を大きくしたら小さくしたりすると、 ズレない場合もあるのですが、最大にすると1pxだけズレます。 ズレない良い方法がありましたら、どうか教えて下さい。 <!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"> <!-- body { background-image: url(bg.jpg); background-repeat: repeat-y; background-position: center top; margin: 0; } #main { background-color: #00FFCC; width: 700px; margin:0 auto; } --> </style> </head> <body> <div id="main">テキスト</div> </body> </html>
- 締切済み
- HTML
- 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;} なにが問題なのかわかる方、教えてください。よろしくお願いします。
- ベストアンサー
- ブログ
- firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。
初めて書き込みで質問する段階の者です。 ヤフーオークション用ページをhtml内にcssを書いて作成しておりましたが、firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。（ファイルはローカルでデスクトッップに置いてあります。） 調べながらの作業で解決出来ず困っております。 書き方に問題があるはずですが、わかりませんでした。 （未チェックですが、恐らくIE関係も全滅だとは思います。） ひとまずsafariをクリアーできたらと思っておりますので ご存知の方、ご教授お願いします。 <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>ヤフーオークションページ</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="css/import.css" media="all" /> <style type=" text/css"> </style> </head>
- ベストアンサー
- Mac
- HTMLでの背景画像設定について
はじめまして。 HP作成初心者なのですが、いろいろとネットで調べながら作成しています。 フレームを使っていて、メニュー画面側のほうに画像をふたつ使いたいと考えています。 それぞれ左上と左下とで固定する画像なのですが、それがどうしてもふたつ同時に表示できません。 <style type="text/css"> <!-- BODY {background-image : url("bg2.jpg");background-position: 100 0%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> <style type="text/css"> <!--BODY {background-image : url("bg.jpg");background-position: 0 100%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> という感じに記述しているのですが、こうすると、下にあるbg.jpgのみが反映されてしまって、bg2.jpgは反映されません。 また、bg2.jpgの上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- CSSが反映されない！ソース公開
なぜかCSSが表示されずに困っています。 解決方法をご指導願います。 CSS↓（ファイル名screen.css） * { margin: 0; padding: 0; list-style: none; text-decoration: none; } body { margin: 25px 0 25px 0; font: normal 11px Trebuchet MS, Sans-serif; background: #000; color: #999; text-align: center; } #container { width: 320px; margin-left: auto; margin-right: auto; border: 1px solid #666; padding: 250px 25px 25px 25px; background: url("../images/top.jpg") no-repeat; text-align: left; } h1 { font: normal 20px Georgia, Sans-serif; margin-left: 45px; margin-bottom: 20px; } h1 span.highlight { color: #efefef; } h1 span.small { font-size: 11px; color: #333; } h2 { margin-top: 15px; margin-left: -25px; padding-left: 20px; border-left: 5px solid #666; font: bold 11px Trebuchet MS, Sans-serif; } INDEX.HTML↓（前半部分のみです） <!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="pl" lang="pl"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="styles/screen.css" media="screen"> </head> <body> はじめてのHP作成です。凡ミス等ご指導よろしくお願いします。
- ベストアンサー
- HTML
- FirefoxでCSSが読み込めない。
ＨＰを作成中です。IEやSleipnirでは思った通りに表示されるのですが、Firefoxではスタイルシートが読み込まれていないようです。 どの部分が悪いのでしょうか。ご教示のほどをよろしくお願いいたします。 以下冒頭部分のソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <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="index.css" type="text/css"> <title></title> </head> <body>
- ベストアンサー
- HTML
お礼
こんな事に何時間も費やしてしまったのですが、 質問して良かったです。 おかげさまで直せました。 ほんとに、どうもありがとうございます