横並びのメニュータブについて

横並びのメニュータブについて

横並びタブナビゲーションのテキストを画像の後ろに含める方法で試行錯誤しております。
下記のCSS記述ではie8及びFirefoxはテキストが隠れ動作確認も問題ないのですが、ie6dではテキストが隠れず画像の下に表示されてしまいます。
どこを訂正または記述追加すればよいか困っております。
ぜひ、ご教授いただければ幸いです。

CSS
/* ---------------- .navi .naviin ---------------- */
.navi {
background:#063686 url("/test/menu_bg.png") repeat-x top;
border-bottom:1px solid #8fa5ca;
}

.navi .naviin{
width:990px;
clear: both;
margin: 0 auto;
}

.navi .naviin ul.tab{
height:30px;
}

.navi .naviin ul.tab li{
float:left;
}

.navi .naviin ul.tab li a.tab_01{
width:163px;
height:0;
overflow:hidden;
display:block;
padding-top:30px;
margin-right:2px;
background:url(/test/navi01_n.png) no-repeat left top;
}

.navi .naviin ul.tab li a.tab_02{
width:163px;
height:0;
overflow:hidden;
display:block;
padding-top:30px;
margin-right:2px;
background:url(/test/navi01_n.png) no-repeat left top;
}

.navi .naviin ul.tab li a.tab_03{
width:163px;
height:0;
overflow:hidden;
display:block;
padding-top:30px;
margin-right:2px;
background:url(/test/navi01_n.png) no-repeat left top;
}

.navi .naviin ul.tab li a.tab_04{
width:163px;
height:0;
overflow:hidden;
display:block;
padding-top:30px;
margin-right:2px;
background:url(/test/navi01_n.png) no-repeat left top;
}

.navi .naviin ul.tab li a.tab_05{
width:163px;
height:0;
overflow:hidden;
display:block;
padding-top:30px;
margin-right:2px;
background:url(/test/navi01_n.png) no-repeat left top;
}

.navi .naviin ul.tab li a.tab_06{
width:165px;
height:0;
overflow:hidden;
display:block;
padding-top:30px;
background:url(/test/navi06_n.png) no-repeat left top;
}

/* ---------------- a.の設定 ---------------- */
.navi .naviin ul.tab li.on a.tab_01{
background:url(/test/navi01_o.png) no-repeat left top;
}
.navi .naviin ul.tab li.on a.tab_02{
background:url(/test/navi01_o.png) no-repeat left top;
}
.navi .naviin ul.tab li.on a.tab_03{
background:url(/test/navi01_o.png) no-repeat left top;
}
.navi .naviin ul.tab li.on a.tab_04{
background:url(/test/navi01_o.png) no-repeat left top;
}
.navi .naviin ul.tab li.on a.tab_05{
background:url(/test/navi01_o.png) no-repeat left top;
}
.navi .naviin ul.tab li.on a.tab_06{
background:url(/test/navi06_o.png) no-repeat left top;
}

/* ---------------- hoverの設定 ---------------- */
.navi .naviin ul.tab li a:hover.tab_01{
background:url(/test/navi01_o.png) no-repeat left top;
}
.navi .naviin ul.tab li a:hover.tab_02{
background:url(/test/navi01_o.png) no-repeat left top;
}
.navi .naviin ul.tab li a:hover.tab_03{
background:url(/test/navi01_o.png) no-repeat left top;
}
.navi .naviin ul.tab li a:hover.tab_04{
background:url(/test/navi01_o.png) no-repeat left top;
}
.navi .naviin ul.tab li a:hover.tab_05{
background:url(/test/navi01_o.png) no-repeat left top;
}
.navi .naviin ul.tab li a:hover.tab_06{
background:url(/test/navi06_o.png) no-repeat left top;
}

/* ---------------- submenu ---------------- */
.navi .naviin ul.submenu{
padding:6px 0 6px 0;
}
.navi .naviin ul.submenu li{
float:left;
padding:0 7px 0 10px;
background:url(/test/sub_line.png) no-repeat left center;
white-space:nowrap;
}
.navi .naviin ul.submenu li a{
padding:0 0 0 12px;
color:#ffffff;
background:url(/test/triangle.png) no-repeat left center;
}
.navi .naviin ul.submenu li.firstList{
background:none;
padding:0 7px 0 5px;
}


HTML
<div>
<div class="navi">
<div class="naviin">
<ul class="tab">
<li class="on"><a class="tab_01" href="">タブ01</a></li>
<li><a class="tab_02" href="">タブ02</a></li>
<li><a class="tab_03" href="">タブ03</a></li>
<li><a class="tab_04" href="">タブ04</a></li>
<li><a class="tab_05" href="">タブ05</a></li>
<li><a class="tab_05" href="">タブ06</a></li>
</ul>
<ul class="submenu clearfix">
<li class="firstList"><a href="">サブ01</a></li>
<li><a href="">サブ02</a></li>
<li><a href="">サブ03</a></li>
<li><a href="">サブ04</a></li>
<li><a href="">サブ05</a></li>
</ul>
</div>
</div>
</div>

投稿日時 - 2011-12-13 14:55:21