解決済
IEのみツリー化の画像が反映されない
私のブログはこちらです→半月ほど前？から、コメントやTBのツリーに使用している画像がIEでだけ表示されなくなりました。Firefoxではきちんと見えるのですが。
何度もアップロードし直したり他の画像に変えてみたりもしたのですが同じ結果です。
スクリプトの配布元にも質問してみたのですが、「なにかのタグが邪魔してるのでは？」という予測だけで、ハッキリとはわからないらしいのです…
どうかお力をお貸しください
回答(4)
4.
まず原因から ・・・
今回の IE だけによる表示の乱れは、前回施したカラムの左右入れ替えがやはり関係します。問題の部分は、CSS の中の #links{} にあります。現在 ・・・
position:relative;
にしており、これで一応前回の問題の解決を得たのですが、これがツリー化の表示が崩れる要因となっていました。ただし、前回におきた悩み同様、この relative を absolute にすると、NN系のブラウザーで見ると、ブログ自体の表示が大幅に崩れることになります。
そこでこういう表記に変えます。
position:static;
標準と言う値です。
これで、ツリー化は IE でも NN系 でもどちらでも表示されます。IE、firefox、Netscape の３つのブラウザーで確認しておきました。（ 最新バージョンのみの確認ですが ） もちろん、ブログのサイドカラムも乱れておりません。
なお、今回の原因には関係ないのですが、ツリー化のスタイル指定の記述にミスが見つかりました。そのままでもなぜか問題がないようなのですが、修正しておかれるほうが良いと思われます。
.leaf {} と .leaf_last {} の中の、no-repeat の後ろに、; が２個付いています。ひとつ削除して下さい。padding-bottom:2px の後ろに ; が付いていません。
そして最後、基本的な CSS の中に、ツリー化のスタイルがまだ残されています。こちらも削除なさるほうが良いと思います。
1.
スクリプトの配布元が何かのタグが邪魔・・・と言っているのであれば、リンクされている文字の hover への指示が気になります。
すべてのリンクに対してではないみたいですが、サイドバーや記事本文のコメント数、トラバ数、タイトルなどの hover 表示に、relative;bottom:1px;left:3px; などを指示していますね。これのサイドバー内の指示が怪しいような気がします。
まず、IE でもツリー化の画像は一部、確認できます。上下にすばやくスクロールさせると、画像の一部が見えます。その状態で、「 コメントありがとう 」 の下の、美香蘭の文字にカーソルでさわると、画像は消えます。次にまたスクロールさせて画像を一部出現させて下さい。その状態で、他のリンク、例えばカレンダーの日付、美香蘭の左横にあるおいしい、編集をさわっても画像は消えません。ところがその左横にある、TB にさわると消えます。
画像が消えるリンクは、すべて relative;bottom:.... のリンクが指示されているものばかりです。こちらでは確認できないのですが、そのリンク指示をは昔からしておられましたか？ ならば関係ないかもしれませんし、この半月前に、さわった個所であれば、怪しいかもしれません。
2.
//innerHTMLってデバッグしにくくていやんな感じなのですが．
もとのがどうなのか知らなくて，月見さんのコードだけを見てしゃべりますが，まず，HTMLの中に埋め込まれているCSSで，
.leaf_areaというクラスがありますが，ここにツリーの一番上の画像を設定されていたのではないでしょうか？今，真ん中と下の画像しか書かれていません．もうひとつ，その付近で，
.aside または a.asideなどという名前のクラスを消しませんでしたか？innerHTMLで書き換えられた後のHTMLにはこのクラスを指定してあるのですが，見たところこの定義がなさそうです．
ここまで確認してダメなら，AQさんの仰っている箇所，CSSの方の
.side a:hoverを一度はずしてみましょう．
で，これでダメだと，HTMLの他の箇所のせいかもしれないかなと思うのですが，その前に気になるのは，HTMLの改行コードが，WindowsのとUNIX系のが混ざってて，.leafのno-repeatの前で改行されてたりするのもちょっとだけ気になります．関係ないような気もしますが．
あー目が疲れた～～（＠o＠；
3.
効果ないと思いますが、一度試してみますか ・・・。
３カラムでなく、２カラムなので、普通はいらないのですが、前のカスタマイズが原因で、サイドバーへの認識がされにくくなっている可能性があります。
ツリー化スクリプトのこの部分↓
var commnets_div = GetPluginByTitle("コメントありがとう"); を、
var commnets_div = GetPluginByTitle("コメントありがとう","links");
に一度してみて下さい。IE は、時々バカになるから ^^;
その後、違う事を考えます。
.leaf_area{} には、画像の設定は確かにないですね。
.leaf{} と .leaf_last{} だけですね。あってます。
コメント(15)
>>1 AQさん
仰るとおりtakoashiさんのスクリプトです。
いちばん最近にカスタムしたのは、同じくtakoashiさんのhttp://www.takoashi.net/archives/50359706.htmlで、この記事が書かれたその日に実行しました。一ヶ月ほど前ですね。
relativeの加筆、ツリー化はそれよりずっと前に行っていましたが、正常に作動していました。
おかしくなったのは、前回こちらで相談させていただいた3/25の一週間ほど前です。
>>2 オニキスさん
leaf_areaのところは、というかツリー化スクリプトは、画像URL以外はまったくいじってません。
>.aside または a.aside
デフォルトのcssを確認しましたが、このクラスはもともとありませんでした。
relative部分、hoverの中身全部を抜いて再構築してみましたが変化はありませんでた。
>no-repeatの前で改行
あ、これは直しました ^^; すいません。
>>#1 月見さん
え～、今確認した所、リンク hover の relative の部分は元に戻したんですね。relative してますから。
前回、ナレッジに質問した、質問 URL を 教えていただけますか？
それと、takoashi さんのスクリプトの、上記 URL のカスタムではなく、前のバージョン、つまり
commenttd.Reverse = 1; を追加しない方法に一度戻してはどうでしょうか？
>>#1
私の書き方が悪かったのでしょうか，スクリプト付近のCSS，
.leaf_area{
・・・
background:url(画像の上パーツURL) no-repeat;
}
の記述が抜けています，という意味なのですが．．．>AQさん
前回の質問スレです→
http://knowledge.livedoor.com/3451
commenttd.Reverse = 1; を追加する前にも戻しましたが変わらずです
＞オニキスさん
最初からその部分の記述はないのですが…
も・し・か・し・て・・・
<style>～</style>をCSSに書くか，ツリーのJavaScriptの前にもっていってみては？
今度はたぶん・・・
CSSの中で，
.side{
font-size:13px;
line-height:135%;
text-align:left;
margin:0 0 10px 0;
padding:5px;
}
とありますが，padding自体をとるか0pxに指定してみて下さい．ダメ？
<!--ローカルに落としていじってたのでどこをいじったか忘れかけてますｗ-->
>> 月見さん
もう最後の手段ですね。
月見さんの、現在のトップページの HTML をメールに添付して
私の所に送って下さい。トップだけで結構です。基本のテンプレートのカテゴリーと名前を教えて下さい。CSS はこちらで、ダウンロードします。私のカスタマイズ用のブログで、実際に貼り付けて、原因を探します。
blog@pekebatu.com
ふーむ．要するに，ツリーを作ったときに，leafのスタイルが適用されていないことが原因なのは確実なので，ConvertTree.jsで書き出すleafにユニークIDをふって，JSで書き出した最後にleaf全部のIDに対して強制的にスタイルを設定すると見えるようにはなるのですが，，，なんか別の解決法がありそうですね．．．
>>4 AQさん
お手数をおかけしました m（＿ ＿）m
position:relative→position:staticで無事表示されました。
＞.leaf {} と .leaf_last {} の中の、no-repeat の
＞後ろに、; が２個
こちらで確認したかぎりでは、ダブッてはいませんでした。
＞padding-bottom:2px の後ろに ; が付いていません。
この記述そのものが、スクリプトにもcssにも見当たらないのですが…
ともかく、問題解決へのご尽力、感謝いたします
m（＿ ＿）m
