CMS「すぐ使えるCGI」の開発者がご質問にお答えします

 

短い一覧の1件目の上部の空白の原因がわかりません (No. 1100)

回答日: 2011-11-29

質問

お世話になっております。
画像付 ウェブページ更新ツール

トップページに短い一覧をSSIで組込み日付とタイトルを最新3件表示させておりますが、組み込んだ先のトップページの1件目の記事の上部に空白が出来てしまいます。

◆トップページ http://www.(掲示板には非表示).com/
 ※お知らせのタイトルと1件目の間の空白(1行の空白)
◆short_list.html
 <!-- article list : generate from short_list.txt -->
%_article_list_%
◆short_list.txt
<dt>%_yyyy_%.%_mm_%.%_dd_%</dt>
<dd><a href="news/topics/%_d_%.html">%_subject_%</a></dd>

html内に無駄な全角空白タグが無いか、などチェックしてみたのですが原因がわかりません。
宜しくお願い致します。
投稿日時: 2011-11-28 15:15

回答

■確認ブラウザについて

該当部分の表示は、ブラウザによって多少異なるようでしたが、Windows の IE9 でおっしゃられている問題が再現しました。


■原因について

原因についてはよく分からないのですが、色々スペースやコメントを省いてみてもIEのみ同じ現象が再発しますので、IEのバグか、またはより上位に設定している何かの設定が継承されてしまっているのかもしれません。


■対応方法

以下のように基本的な行の高さを変更してみたところ、問題の空白は無くなりましたのでお試し下さい。ただ、若干日付とタイトルの行の高さに違いが出てしまうようですので、詳細は調整下さいますようお願い申し上げます。


index.css の30行目付近

#conts .dlistA {
/*
    padding-top: 10px;
    line-height: 1.8;

padding と元の行高さの指定は削除
*/
    line-height: 0; /* 高さを0に指定。このままだと全ての行がつぶれる */
}

#conts .dlistA dt {
    background: url(../../img/common/icon01.png) no-repeat left 7px;
    padding-left: 10px;
    float: left;
    color: #990000;

    line-height: 1.5; /* 日付部分に行高さを指定 */
}

#conts .dlistA dd {
    padding-left: 7.8em;
    margin-bottom: 5px;

    line-height: 1.5; /* タイトル部分に行高さを指定 */
}


◆いただいたお問合せ内容からの変更点

URL非表示にしました。

回答日: 2011-11-29