テキストリンクをクリックすると出る枠線

質問

ie6とfirefoxで違いが出てしまい困っています。

---html---
<div id="footer">

<div id="footer_navi">
| <a href="#">navi1</a> | <a href="#">navi2</a> | <a href="#">navi3</a> | <a href="#">navi4</a> |
</div>

<div id="copyright">
Copyright &copy; ああああ. All Rights Reserved.
</div>

</div>

---css---
#footer {
width : 900px;
background: url(../img/footer/footer_bg.gif) center top repeat-x;
}
#footer_navi {
padding: 10px 0 50px 0;
text-align: center;
color: #fff;
}

#copyright {
padding: 10px 0 5px 0;
text-align: center;
color: #fff;
}

ie6でページを開きテキストリンクをクリックするとテキストの下に
大きな余白も表示されてしまいます。
微妙に伝えずらいのですが以下のような感じです。
(navi1の周りの線が枠線だと思ってください)

-------
| navi1 |
|　　　　|
|　　　　|
|　　　　|
-------

paddingが原因のようなのですがレイアウトの都合上、
paddingを解除することもできずで困っています。

firefoxで表示すると
-------
| navi1 |
-------

のようになり下に余白が空かないのですがどうすればいいでしょうか？

回答No.1

noname#56851

#footer_navi {
padding: 10px 0 50px 0;
text-align: center;
color: #fff;
}
これを
#footer_navi {
padding: 10px 0 0 0;
text-align: center;
color: #fff;
}
こう変えると、IEでもFierfoxでも同じ様になります。