html - 画像の下に表示される垂直バー?

Question

サイトにいくつかの画像を追加しようとしていますが、何らかの理由で画像の下と右側に縦棒が表示されます。

ここに私のウェブサイトの URL があります: http://bit.ly/Lcspfp

問題の画像は、ページの下部にあるブランドのロゴです。

ブランドロゴを表示するために使用するコードは次のとおりです。

<ul id="brands">
<li><a><img src="images/brand1.png" alt="" /></a></li>
<li><a><img src="images/brand2.png" alt="" /></a></li>
<li><a><img src="images/brand3.png" alt="" /></a></li>
<li><a><img src="images/brand4.png" alt="" /></a></li>
<li><a><img src="images/brand5.png" alt="" /></a></li>
<li><a><img src="images/brand6.png" alt="" /></a></li>
<li class="last"></li><p>
</ul>

これは、私が望んでいない垂直バーのある画像の画像です: http://i.imgur.com/9g1do.png

Answer 1

次の CSS ルールを追加します。

ul#brands a {
    background:none;
}

Answer 2

この CSS ルールを削除します。

background: url(../images/links_separator.gif) no-repeat 100% 50%;

それらの垂直線を作成します。

Answer 3

styles.css ファイルの 644 行目を次のように変更します。

.footer ul a { padding-right:5px; margin-right:3px; }