ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
QNo.4016123 movable type　ブログの罫線を画像に置き換えるには
質問者：oscar16 ブログとブログの間に罫線を挿入するスタイルシートを応用して罫線部分を
画像に置き換えるために下記の記述をしました。


#content .posted
{
background:url(images/hand-stech.jpg)no-repeat;
padding-bottom:10px;
margin-bottom:10px;
}

firefoxでは罫線部分に画像が表示されるのですが、IEでは表示されません。
Movable Typeのサポートに質問したのですが、具体的な修正内容については
一般的な HTML や CSS などの技術的な知識が必要となるため、個別のご案内
を行っていないと云われてしまいました。
色々と検索したのですが具体的な解決方法が見当たりません。
皆様のお知恵を貸していただけると助かります。
よろしくお願いします。
困り度：
  • すぐに回答を！
質問投稿日時：
08/05/12 10:31

回答
ANo.1 IEだけで表示されないならIEのバグなのかもしれませんが、提示されている情報だけでは判断難しいと思います。
#content .postedの部分にって、中身（テキストなど）はあるんでしょうか？
高さを与えてみたらどうなるかなあとはちょっと思いましたが、それも正しいのかどうか、他の部分を見てみないと。

・xml宣言はあるか？
・DOCTYPE宣言はどうなっているか？
・エントリー全体のHTML構造は？（できればCSSも）

を補足していただければ、何かわかるかも・・・
（全てのソースが見られるわけではないので答えが出るとは限りませんが）
回答者：Muller3
種類：補足要求
どんな人：一般人
自信：参考意見
回答日時：
08/05/12 13:02
この回答への補足罫線画像の表示については解決したのですが次の問題が発生しました。
「投稿者 ｜コメント(0) ｜トラックバック(0)」の下に罫線画像が配置さ
れるようにしたいのですが、間隔が詰まっています。
background-position　で位置決めしたのですが上手く間隔があきませんでした。
間隔を空ける方法を教えていただけると助かります。
ソースは下記の通りです。（文字制限でエラーが出たため部分的なソースになります。）
よろしくお願いします。


【メインページ】
<body>
<div id="container">
<div id="header">
<h1 lang="en"><a href="<$mt:BlogURL$>"><$mt:BlogName$></a></h1>
<h2><$mt:BlogDescription$></h2>
</div>
<div id="category">
<MTCategories show_empty="1">
<MTIfNonZero tag="MTCategoryCount">
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryLabel$></a>
<MTElse>
<span>
<$MTCategoryLabel$>
</span>
</MTElse>
</MTIfNonZero>
</MTCategories>
</div>
<div id="content">
<MTEntries lastn="3">
<MTDateHeader>
<h2><$MTEntryDate format="%x"$></h2>
</MTDateHeader>
<h3><$mt:EntryTitle$></h3>
<$mt:EntryBody$>
<p class="posted">
投稿者<$mt:EntryAuthor$>:
<a href="<$mt:EntryPermalink$>">
<$mt:EntryDate format="%X"$></a>
｜<a href="<$MTEntryPermalink
archive_type="Individual"$>#comments">コメント(<$MTEntryCommentCount$>)</a>
<MTEntryIfAllowPings>
｜<a href="<$MTEntryPermalink
archive_type="Individual"$>#trackbacks">トラックバック(<$MTEntryTrackbackCount$>)</a>
</MTEntryIfAllowPings>
</p>
</MTEntries>
</div>
<div id="footer">
<p class="rss">
<a href="<$mt:BlogURL$>index.rdf">
<span class="rss-format">RSS</span>
<span class="rss-version">1.0</span></a></p>
<p>Powered by<a href="​http://www.movabletype.jp">​
Movable type<$MTVersion$></a></p>
<p>Copyright(C)WALK IN THE WOODS,All rights reserved.</p>
</div>
</div>
</body>
</html>

【スタイルシート】
body {
text-align:center;
}

#container {
width:640px;
margin-left:auto;
margin-right:auto;
text-align:left;
}

/*ヘッダー部分*/
#header h1 {
font-size:24px;
font-family:Arikal Black,Helvetica,sens-serif;
margin-top:0;
margin-bottom:0;
}

/*カテゴリーメニュー*/
#category {
margin-top:3px;
text-align:right;
}

#category a,#category span{
font-size:12px;
color:#77a822;
margin-left:10px;
}

#header h1 a {
color:#2cccff;
text-decoration:none;
}

#header h2 {
color:#333333;
font-size:12px;
margin-top:6px;
margin-bottom:0;
}

#header {
background-color:#c7ddff;
padding:16px 20px 60px;
background-image:url(<$MTBlogArchiveURL$>head01.jpg);
}

/*エントリー部分*/
#content h2 {
font-size:12px;
color:#afbc0d;
}

#content h3 {
font-size:14px;
color:darkblue;
}


#content p {
font-size:12px;
color:#666666;
line-height:140%;
}

#content a {
color:darkblue;
}

#content .posted {
background:url(images/hand-stech02.jpg) no-repeat;
padding-bottom:30px;
margin-top:20px;
}

/*フッター部分*/
#footer {
border-top:solid 5px #b2cbff;
padding-top:6px;
}

#footer p{
font-size:12px;
margin-top:0;
margin-bottom:0;
}

#footer a{
color:#77a822;
text-decoration:none;
}

#footer .rss{
border:solid 1px #999999;
padding:1px;
width:80px;
}


#footer .rss a{
display:block;
width:100%;
background-color:#bbbbbb;
color:black;
font-size:9px;
font-family:Arial Helvetica,sans-serif;
}

#footer .rss-format{
background-color:orange;
padding:0 5px;
}

#footer .rss-version{
padding 0 5px;
}
この回答へのお礼Muller3様

早速のご回答誠にありがとうございます。
スタイルシートの
background:url(images/hand-stech.jpg)　と　no-repeat;
の間に半角スペースを入れたらIEでも表示されました。
とても初歩的なミスでお恥ずかしいかぎりです。
お騒がせして申し訳ありませんでした。
 
このページのトップへ