Tweet

Pocket

写真を敷き詰めた時に、li aで組むとIE6で見るとちゃんと横並びにならない。

自分の子供の少年野球チームなので、対応しなくてもいいかなとも思いましたが、

IE6に対応してみました。

/* Photo thumbnail */
 ul.thumbnail {
 padding: 0px;
 margin-top: 10px;
 width: 580px;
 }
 ul.thumbnail li a {
 width:175px;
 border: 1px solid #999999;
 background-color:#eeeeee;
 float: left;
 margin-right: 8px;
 margin-bottom: 8px;
 text-align: center;
 line-height:0;
 font-size:0;
 padding: 4px;
 display: inline;
 }
 ul.thumbnail li a:hover {
 border-color: #333333;
 }
 ul.thumbnail li img {
 vertical-align: bottom;
 margin-right: auto;
 margin-left: auto;
 }

のようにスタイルシートで組むと

のようになる。
さんざん困ったあげく

/* Photo thumbnail */
 #thumbnail ul {
 margin-top: 10px;
 width: 580px;
 }
 #thumbnail li {
 display: inline;
 float: left;
 }
 #thumbnail a {
 width:175px;
 background-color:#eeeeee;
 border: 1px solid #999999;
 display: inline;
 float: left;
 padding: 4px;
 margin-right: 8px;
 margin-bottom: 10px;
 }
 #thumbnail a:hover {
 border: 1px solid #333333;
 }
 #thumbnail li img {
 vertical-align: bottom;
 }

にすればいい。

上の並びは写真3枚だったが、5枚に変えてある。

並びそのものは下記のよう一列にキッチリと並んだ。

結構これで時間かけちゃったよ。

ちなみにこのサイトは、わたくしの子の少年野球チームです。

サイトはMovableTypeで作成。

アップロードした写真や画像にタグ付けして、自動的に並ぶようにしてあります。

http://tomioka.symphonic-net.com/tomioka/