- 締切済み
chromeだけbody直下に空白が開く
ワードプレスを使い、サイトを構築中です。 chrome、ie８、Firefox、Safariで、見え方をチェックしていたところchromeだけ、<body>直下に空白ができます。 何が原因なのかわかりませんでしょうか。 htmlソース（一部） ------------------------ <body> <div class="wrap_h"> <h1>テスト運営中</h1> </div><!-- wrap_h --> ------------------------- body、h1、wrap_h のcss（一部） ------------------------- body { margin:0; padding:0; font-family:"ＭＳ ゴシック","ヒラギノ角ゴ Pro W3","平成角ゴシック",monospace,"Courier New"; background:url(img/body_back.gif) repeat-x; font-size:1em; } h1,h2,h3,h4,h5,h6,form { margin:0; padding:0; } .wrap_h , .wrap { margin:0 auto; padding:0; width:920px; } h1 { font-size:0.8em; color:#fff; font-weight:normal; line-height:30px; margin:0 0 10px 0; padding:0; } ----------------------------- 参考の画像も添付しますのでよろしくお願いします。
- Y-oTo-Y
- お礼率26% (7/26)
- CSS
- 回答数7
- ありがとう数8
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
Choromeのレンチマーク（設定）から ツール → デベロッパーツール にて、 body もしくは、 body直下の div の CSS styleを見れば一目瞭然では？ CSS適応のチェックボックスをONやOFFにしてみるとか。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
div{border:solid 1px gray;} だと？？？
お礼
解決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
こんばんは。コードをコピペ試してみましたが、私の環境ではwin, mac 共にchromeで問題なく（隙間なく）表示されています（background 画像はないので、こちらの手元にあるものを使いました）。 試しに、Firefox、Opera、Safariでも試しましたが、上記のコードであれば、すべて同じ見え方（隙間なし）で表示されています。 もしかしたら、開示されたＣＳＳ以外の何かが影響しているのかもしれませんが、そうなると原因は多岐に渡るので一概に何だとは言えなくなるかもしれませんね。 解決にはなりませんが、貼りつけてあるコードは、少なくとも私の環境では問題ないということは報告しておきます。
お礼
解決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
- sora1tora2
- ベストアンサー率69% (27/39)
こんにちは CSSリセットは試されましたか？ 一番簡単なやり方は *{ margin: 0; padding: 0; } ただ、このやり方だと意図しない要素もリセットされてしまう という理由で今はあまり使われていませんが。 参考になればよいのですが。
お礼
解決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
- 4017B
- ベストアンサー率73% (1303/1774)
例文のHTMLとCSSのみでは、自分の環境下（Chrome 11.0.696.71）では正常に。つまり上部に隙間無く表示されます。なので、何かそれ以外の他の部分のCSSなり、HTMLが影響してるんじゃないでしょうか？ また、基本的に Safari と Chrome は、同じWebkitエンジンを使用していますので。極端に違った表示のされ方はしないので。Safariで問題無く、Chromeだけ可笑しいというのなら、問題は何かChrome側にあるかもしれません（何か個別の拡張機能とか？）。
お礼
解決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
XHTMLかな CSSの最初に html,body{margin:0;padding:0;} と書いておく・・・
お礼
決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
補足
試しましたがだめでした。 引き続き情報よろしくお願いします。
- t_ohta
- ベストアンサー率38% (5068/13242)
cssに以下の内容を入れてみたら変わりませんでしょうか。 WordPressバージョンが分からないので適切かは分かりませんが、ちょっとまえのバージョンアップでWordPressがデフォルト指定しているスタイルのせいで隙間が出るようになった事がありましたが、その時はオリジナルのcssに以下の記述を加えたら隙間が出なくなりました。 html { margin: 0px !important; }
お礼
解決しました。 詳しくは、最終の回答のお礼欄に記載します。 ありがとうございました。
補足
試しましたが、だめでした。 ワードプレスのバージョンですが、昨日3.1.0から3.1.3にアップデートしたところなのですが、 3.1.0、3.1.3ともに同じ症状です。
関連するQ&A
- 背景の色がコンテンツ部分にも表示されてしまいます
サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。 お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。 <html> <body> <div id="wrapper"> <div id="header"></div> <div id="contents"> <div id="banner"></div> <div id="navi"> <h2><a href="../service/index.html"><em>あああ</em></a></h2> 中略 </div> <div id="bread"><a href="index.html">トップページ</a> > あああ</div> <div id="main"> <p>あああ</p> </div> <div id="sidenavi"> <h3>あああ</h3> <p>あああ</p> </div> <div id="pagetop"><a href="#"></a></div> <div id="footer">Copyright (c) 2009 All Right Reserved </div> </div> </body> </html> <css> body { text-align: center; margin: 0px; padding: 0px; background: #FFCCFF; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 850px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; height: auto; width: 850px; background: #FFFFFF; } #contents #banner { background: url(image/banner.jpg) no-repeat; margin: 0px; padding: 0px; height: 304px; width: 850px; } #contents #navi { background: url(image/menu.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #contents #navi2 { background: url(image/menu2.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #navi h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi em { visibility: hidden; } #navi2 h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi2 em { visibility: hidden; } #contents { margin: 0px; padding: 0px; height: 500px; width: 850px; background: #FFFFFF; } #contents #sidenavi p { font-size: 95%; line-height: 1.1em; margin-right: 5px; margin-left: 5px; } #sidenavi h3 { font-size: 105%; font-weight: bold; border-left: 7px solid #FF3366; padding-left: 5px; background: #FFCC33; margin: 0px; padding-top: 5px; padding-bottom: 5px; } #navi a { margin: 0px; padding: 0px; height: 61px; width: 169.5px; display: block; text-decoration: none; } #navi2 a { margin: 0px; padding: 0px; height: 61px; width: 170px; display: block; text-decoration: none; } #contents #main { margin: 10px 0px 0px; padding: 0px 10px 10px; height: auto; width: 610px; float: left; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ"; background: #FFFFFF; } #contents #pagetop { clear: both; background: #FFFFFF; margin: 0px; padding: 0px; } #contents #sidenavi { margin: 10px 5px 0px 0px; padding: 0px; float: right; width: 200px; border: 1px dashed #FF3399; background: #FFFFFF; } #footer { font-size: 90%; color: #FF3366; text-align: center; margin: 0px; padding: 10px 0px 0px; clear: both; border-top: 1px dotted #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; background: #FFFFFF; } #main p { font: bold 120% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #FF3399; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #pagetop img { text-align: center; padding-top: 10px; margin: 0px; padding-bottom: 10px; padding-left: 5px; } .p1 { font-size: 130px; color: #FF3366; padding: 10px; width: 590px; border: 2px dashed #FF3399; background: #FFCCFF; margin: 10px; text-align: center; } #main img { margin: 0px; padding: 0px 0px 10px; } #contents #bread { margin: 5px 0px 0px; padding: 5px 5px 0px 10px; font-size: 100%; width: 830px; }
- 締切済み
- HTML
- スタイルシートを使用したサイト作りで
サイトページの真ん中に４５０ｐｘの白の柱に本文を入れ、周りをすべて黒というスタイルにしたく思ってます。 柱をウィンドウの上から下まで表示したいのですが、どうしてもうまくいきません。どうぞ御指南下さい！！作ったタグを載せます。 *{margin:0; padding:0; font:normal normal normal x-small/1.5em Verdana,"ＭＳ ゴシック",Osaka,Gothic,sans-serif;} body{ height:100%; background-color:#000000; color:#000000; cursor:default;} br{ letter-spacing:normal;} #body{margin:0px auto; width:450px; height:100%; background:#ffffff;} #header{padding:0px} #menu{padding:0px 0px 5px; text-align:center;} #main{padding:0px 10px;} #navi{text-align:right; padding:0px 10px;} #foot{height:123px; background:url(img/img2.gif) no-repeat 0% 0%;} .text{padding:0px 0px 10px;} p{padding:1px 0px;} h1,h2{font-weight:bold;} h1{text-align:center; color:#666666; font-size:190%; padding:10px 0px 0px;} h2{ text-align:left; color:#000000; font-size:100%; padding:0px 2px; margin:5px 0px;} サイトページ <body> <div id="body"> <div id="menu"> <h1 id="TOP">- ABOUT - </h1> </div> <hr class="none"> <hr class="none"> <div id="main"> <h2>test</h2> <div class="text"> <p>test</p> </div> <h2>test</h2> <div class="text"> <p> test </p> </div> </div> <div id="navi"> <p>INDEX // <a href="#TOP">PAGE TOP</a> // </p> </div> </div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- 背景画像をセットしたh1にmargin-topを記述すると、何と親divの背景まで一緒に移動してしまう
何を直しても直らず困っております。 h1タグに会社ロゴをセットするために会社ロゴをh1の背景にしました。 空タグじゃいけませんのでh1のテキストは入れて、それを-9999pxでセットしました。 マージンをセットしないとヘッダー最上部左上にぴったり配置されてしまうので、上と左にマージンをとって配置させたい位置にもってきたいのですが、驚いたことに、h1にmargin-leftとmargin-topを記述したところ、何と、親divの背景が一緒にmargin-topの数値と同じだけ下に移動してしまうんです。。。どうやって直せるでしょうか？？ 以下、ソースです。 ●HTML ------------------------------------------------------------ <div id="hdr_wrap"> <div id="hdr"> <h1 title="My Site"><a href="index.html">My Site</a></h1> </div><!--/div id="hdr"--> </div><!--/div id="hdr_wrap"--> ------------------------------------------------------------ ●CSS ------------------------------------------------------------ body { margin: 0; color: #333; font-family: "メイリオ","ヒラギノ","ＭＳ Ｐゴシック","平成角ゴシック",sans-serif; font-size: 80%; line-height: 1.4em; letter-spacing:1px; } h1 { width: 228px; height: 60px; margin-left: 62px; margin-top: 39px; padding: 0; color: #ccc; text-indent: -9999px; background: url(../img/cmn/hdr_vi.jpg) no-repeat left top; } h1 a { width: 228px; height: 60px; margin-left: 62px; margin-top: 39px; padding: 0; border: 0; text-decoration: none; } div#hdr_wrap { background:url(../img/cmn/hdr_bg.jpg) #252a2c no-repeat; width:100%; height:220px; text-align: left; } div#hdr { display: block; width:955px; height:117px; } ------------------------------------------------------------ ●初期化CSS（このCSSは関係ないとは思いますが一応記載） ------------------------------------------------------------ * { margin: 0; padding: 0; border: 0; background-color: transparent; color: #333; font-size: 100%; font-weight: normal; font-style: normal; text-decoration:: none; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,blockquote,table,th,td { margin: 0; padding: 0; } p { margin: 0 0 1em 0; } table { border-collapse: collapse; border-spacing: 0; margin-left: auto; margin-right: auto; } address,caption,cite,code,dfn,h1,h2,h3,h4,th,var { font-style: normal; font-weight: normal; } fieldset,img,abbr { border: 0; } caption,th { text-align: left; } q:before,q:after { content: ''; } a { text-decoration: none; } img { border: none; vertical-align: bottom; } p.trs{ white-space: nomal; margin: 5px 0px 0px 0px; } ------------------------------------------------------------ 宜しくお願い致します。
- ベストアンサー
- HTML
- ページの一番上にできた余分な余白の消し方
ページの一番上に800×100の画像を用意し、それを背景画像として設定。 その上に<h1>のタイトルを表示しようとすると、 背景画像の上に無駄な余白ができてしまいます。 何か間違えているのでしょうか？この余白の消し方を教えてほしいです。 よろしくお願いいたします。 <html> <head> <title></title> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background-color: #000; color: #333333; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; text-align: center; } div#container { width: 800px; background-color: #ffffff; text-align: left; margin: 0 auto; padding: 0; } div#header { width: 800px; height: 100px; background-image: url(image/sample.jpg); background-repeat: no-repeat; padding: 0; margin: 0; } h1 { padding-top: 15px; padding-right: 0; padding-bottom: 15px; padding-left: 0; font-size: 15px; font-weight: normal; line-height: 15px; margin-top: 30px; margin-right: 0px; margin-bottom: 0; margin-left: 0; color: #000; } div#mainContent { padding: 5px 15px 0 15px; } </style> </head> <body> <div id="container"> <div id="header"> <h1>テスト</h1> </div> </div> <div id="mainContent"></div> </body> </html>
- ベストアンサー
- HTML
- IE８での段落のズレについて
IE７では正常（自分が思うように）に表示してくれますが、 IE８では互換モードにしないと大きなタイトル文字の前に１つ 段落が出来てしまい、２行分のタイトルが４行になってしまい、 タイトル画像からはみ出てしまいます。 （下記の例ですと、「アウトドア」の表示が空白の行の下に来ます。 また、「大好き！」の前にも空白の行があり、文字自体も タイトル画像からずれて表示されてしまいます） 色々チェックしたのですが自分では分からなかったので、どなたか 教えて下さい！ ＜ＣＳＳ＞ body {background-color:#000099;} div#box {width: 680px; margin-left:auto; margin-right:auto; background-color:#ffffff; padding-top:10px;} div#header{background-color: #999999;width:660px;height:290px; background-image: url(./boad.jpg); background-repeat: repeat; margin-right:auto; margin-left:auto; padding-top:10px; } div#header h1 {font-size: 12px; color:#ffffff; padding:0px 10px 0px 10px; font-weight:bold;} div#header h2 {font-size:12px; margin-left:20px; font-weight:bold; color:#ffff00;} div#header h3 {font-size:20px; margin-left:30px; color:#ffffff;} div#header h4 {font-size:4.5em; color:#dddddd; font-weight:bold; margin-left:80px; line-height:100%; } div#header h5 {font-size:4.5em; color:#dddddd; font-weight:bold;margin-left:280px; line-height:100%; } code.main {text-align:left; } .p1 {font-size:15px; color:#333333; } div#footer {width: 680px;margin-top: 50px; } address {font-size: 0.75em; text-align: center; font-style:normal; padding-bottom:20px; color:#cccc00;} <HTML ～head以降> <body> <div id="box"> <div id="header"> <h1> 釣り キャンプ 車 etc </h1> <h2>多趣味な男のこだわり日記</h2> <h4>アウトドア</h4> <h5>大好き！</h5> </div> <p><code class="main p1"> 皆さんはどんな趣味をお持ちですか？<br> 私は沢山の趣味を持っています。<br><br> そのためいくら働いてもお金は溜まりません・・・・・<br> でも、沢山の趣味を自分なりに楽しむのは<br> ステキな事だと思っています。</code></p> <div id="footer"> <address>多趣味研究会, All rights reserved.</address> </div> </div> </body> </html> 宜しくお願い致します。
- ベストアンサー
- HTML
- google画像検索のように画像を表示させたい
http://oshiete1.goo.ne.jp/qa4869855.html で質問した者です。 「googleのように 画像」で検索したところ http://okwave.jp/qa4567914.html このページがHITしました。 そこでNo3の方のソースを元に画像を表示させてみました。 ---ここから--- <style type="text/css"> <!-- p{ text-indent: 1em;} body>h1,body>h2{ text-align:center;} p.abstract{ margin-left: 20%; margin-right: 20%;} div.ImageList{ position: relative; margin-left:20%;margin-right:10%;width: auto; border: solid 2px blue;} div.ImageList ol{ display:block; margin:0px; padding:0px;} div.ImageList>ol>li{display: block; margin: 2px;padding:0px;border:solid 1px gray; width:160px;height: 100px;float:left;text-align:center;} div.ImageList>ol>li>ol>li{display:block;font-size:0.8em;text-align:left;padding:0.2em;text-indent:1em;} div.ImageList hr{ clear:both;visibility:hidden;} div.ImageList div{ position: absolute; width: 21%; left: -23%;top: 0px;font-size:0.9em} --> </style> ---ここまで--- このスタイルシートについてなのですが、 画像のまわりについている黒の薄い線と、大きな青い線を消すことは出来ないでしょうか？ この二つの枠線を消してもっと画像どうしをギュッと詰め込みたいのです。 どの部分を削れば削除することが出来ますか？
- ベストアンサー
- HTML
- ワードプレスのテーマParabolaの文字サイズ
記事タイトルのフォントサイズの変更方法をご存知の方はいませんか？ CSSで #content .entry-title { font-size: 36px;→font-size: 16px; font-weight: normal; line-height: 1.3em; padding:0px; margin: 0px; word-wrap:break-word; } とか #content .entry-content h1 { font-size: 36px;→font-size: 16px; } などと変更してもダメでした。 HTML的には <div id="main"> <div id="forbottom" > <div style="clear:both;"> </div> <section id="container" class="two-columns-right"> <div id="content" role="main"> <h1 class="entry-title">タイトル（ここの文字サイズを変更したい）</h1> という感じです。
- ベストアンサー
- CSS
- Firefoxで見出しが上段にずれてしまいます。
IE6.0とOperaであれば正常に表示されるのですがFirefox2.0ですと<h1></h1>の部分が上の方にずれてしまいます。 色々変えてみましたが結局直すことが出来ませんでした。ご教授の程、よろしくお願いします。 ◆スタイルシート◆ body { font-family: "ＭＳ Ｐゴシック", ; margin: 0px; padding: 0px; text-align: center; } #wrapper { text-align: left; margin: 0px auto; padding: 20px; height: auto; width: 900px; h1 { font: x-large "ＭＳ Ｐゴシック", ; border-bottom: 1px solid #0000FF; border-left: 10px solid #0000FF; width: 100%; text-align: left; #contents { margin: 0px; padding: 0px; height: auto; width: 750px; } #wrapper #contents #side { font: small/23px "ＭＳ Ｐゴシック", ; } #contents #side { margin: 0px 5px; padding: 0px; float: left; height: auto; width: 430px; } #contents #main { margin: 0px; padding: 0px; float: right; height: auto; width: 300px; ｝ ◆ＨＴＭＬ◆ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <body> <div id="wrapper"> <div id="contents"> <h1>名称</h1> <div id="side"> <P>説明文 </P> </div> <div id="main"> JPEG画像 </div> </div> ※contents～mainまでを何度か繰り返します。 </div> </body> </HTML>
- ベストアンサー
- HTML
- フッターの画像の位置づけ指定方法がわからない
ヘッダー・メイン・サイドバー（左右）・フッターの５コマ組みのサイトを表現したいのですが、 フッターに指定した画像を全体サイズでセンターに寄せて（画像の上に、真ん中寄せでテキストを乗せたい）反映させるにはどうしたらいいのでしょうか。フッターに指定しているjpg画像のサイズは、(○●.jpg);511×229pxです、よろしくお願いします。 <style type="text/css"> body /* コンテナ */ div#container{width: 100%; margin-left: auto; margin-right: auto} /* ヘッダー */ div#header{background-color: #ffffff; font-color:#4876ff; /*background-image: url(.jpg);*/ background-repeat: no-repeat; background-position: center top; /*padding: 28px 20px 150px*/ } div#header h1{margin: 0} div#header p{color: #ffffff; font-size: 0.50em; margin: 0} /* メイン */ div#main{width: 100%; float: left; margin-right: -230px} /* コンテンツ */ div#content{width: 100%; float: right; margin-left: -186px; margin-right: auto; margin-bottom: 25px} div#content h2, div#content h3, div#content p {margin-left: 186px; margin-right: 230px} div#content h2{background-color: #92c9ff; background-image: url(); background-repeat: repeat-x; border: solid 1px #84c2ff; font-size: 0.875em; color: #00688b; line-height: 32px; padding-left: 6px; margin-top: 0; margin-bottom: 0} div#content h3{background-color: #ffffff; background-image: url(); background-repeat: no-repeat; background-position: 0px 2px; font-size: 0.875em; line-height: 22px; padding-left: 26px; margin-top: 30px; margin-bottom: 0} div#content p{font-size: 0.75em; line-height: 1.6; margin-top: 10px} /* サイドバー */ div#sidebar{ background-image:url(.jpg); width: 170px; float: left; margin-bottom: 25px} ul.sidemenu{font-size: 0.90em; margin-top: 0; margin-left: 0; padding-left: 0; line-height: 0} ul.sidemenu li{list-style-type: none} ul.sidemenu li a{ display: block; line-height: 25px; text-decoration: none; text-align:right background-img:url(.gif); padding-left: 10px} ul.sidemenu li a:hover{background-color: #cdc1c5 color: #8b1c62 } ul.sidemenu ul {margin: 0; padding: 0} ul.sidemenu ul li a {background-img:url(gif); color:#5d478b; border-bottom: solid 1px #ab82ff; line-height: 24px} ul.sidemenu ul li a:hover {background-color: #eee0e5; color:#ffffff; border-bottom: solid 1px #ab82ff; } p.feed{margin-bottom: 10px} p.feed a{font-size: 0.75em; color: #444444; text-decoration: none; line-height: 30px; border: solid 1px #888888; padding: 5px} p.feed img{border: none; vertical-align: middle} /* 右サイドバー */ div#sidebar-right{width: 150px; float: right} div.info{border: solid 1px #84c2ff; margin-bottom: 18px} div#sidebar-right h2{background-color: #c6e3ff; background-image: url(); color: #3c5916; font-size: 0.75em; text-align: center; padding: 5px; margin-top: 0; margin-bottom: 3px} div#sidebar-right p.photo{text-align: center} div#sidebar-right p{font-size: 0.75em; margin: 10px 5px} div#sidebar-right ul{font-size: 0.75em; margin: 5px; padding: 0} div#sidebar-right ul li {background-image: url(); background-repeat: no-repeat; background-position: 0 6px; padding-left: 13px; list-style-type: none} /* フッター */ div#footer{background-image:url(○●.jpg); background-repeat: no-repeat; width: 100%; margin-top: ; padding-top: 8px; clear: both} address{font-size: 0.75em; font-style: normal; text-align: center} </style> ・・・・・・・・ここまで指定 ここから、html打ち込み↓ <!-- フッター --> <div id="footer"align="center"> ～～テキスト文章～～<br> <address><big>～アドレスのテキスト～</address></big> <br>○○おなじくテキスト</div> <div align="center"> ～◆◆サイトの名前～ <img src="○○.jpg"border="0"bordercolor="#87ceeb"alt=""> <br><br> </body> </html> 少しいじると、おかしな反映になります、お助け下さい。
- 締切済み
- CSS
- 見出し<h3>にリンクを追加すると背景画像が表示されない
h3の見出しに<a>を追加するとh3に設定していた見出し画像がIEで表示されなくなってしまいました。 FireFoxではきちんと表示されているので IEのバグかと思っているのですが、 もし解決方法がありましたら、アドバイスいただければ幸いです。 [HTML] <div class="contents"> <h3><a>見出し</a></h3> </div> [CSS] .contents h3 { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} 色々と試してみたんですが、 たとえば、以下のように見出しの文章の一部にリンクを張ると 見出しの背景画像がきちんと表示されました。 [HTML] <div class="contents"> <h3>見<a>出し</a></h3> </div> また、CSSに以下を追加してみたんですが 背景画像が二重になって表示されてしまいました。 [CSS] .contents h3 a { background: url(../images/marker_blue_square.jpg) no-repeat 0 0.1em; padding:0 0 0 25px; margin-left:2.2em; margin-top:1em; font-size:medium;} よろしくお願いします。
- 締切済み
- HTML
お礼
デベロッパーツール初めて知りました。私の知識ではいまいち理解できない部分もありましたが、勉強になりました。 さて、自分なりにいろいろ試したところ、とりあえず解決いたしましたので報告します。 結論：ログイン状態だとすきまができる。ie、Firefox、Safariも同様にすきまができる。 ログアウトすれば、すきまが無くなる。 chromeのみログインしていましたので、このような質問タイトルになりましたが、原因はchromeではありませんでした。 なぜログインしているとすきまができるのかは、不明ですが、運用上の問題は無くなりました。 あらためて、回答頂いた皆さまにお礼申し上げます。