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

質問

横並びタブナビゲーションのテキストを画像の後ろに含める方法で試行錯誤しております。
下記の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>

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.2

ORUKA1951

まずHTMLから書き直します。HTMLは文書構造をマークアップするものですから、きちんとマークアップが出来ていれば、スタイルシートも簡単になります。
　ソースから判断すると、カレントのページのみサブメニューを表示することを考えているのだろうと思いますが、その場合でも各HTMLのごく一部だけ書き換えて済むようにしたいのでしたら、下記の様なHTMLで良いでしょう。
　liにcurrentのようなclass名をつけておくとスタイルシートは楽です。

　このようにHTMLができているとスタイルシートは十数行～数十行もあれば書けるはずです。

＿<div class="nav">
＿＿<ul>
＿＿＿<li class="left0"><a href="">タブ01</a>
＿＿＿＿<ul>
＿＿＿＿＿<li><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>
＿＿＿</li>
＿＿＿<li class="current left1"><a href="">タブ02</a>
＿＿＿＿<ul>
＿＿＿＿＿<li><a href="">サブ01</a></li>
＿＿＿＿＿<li><a href="">サブ02</a></li>
＿＿＿＿＿<li><a href="">サブ03</a></li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li><a href="">タブ03</a>
＿＿＿＿<ul>
＿＿＿＿＿<li><a href="">サブ01</a></li>
＿＿＿＿＿<li><a href="">サブ02</a></li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li left="3"><a href="">タブ04</a>
＿＿＿＿<ul>
＿＿＿＿＿<li><a href="">サブ01</a></li>
＿＿＿＿＿<li><a href="">サブ02</a></li>
＿＿＿＿＿<li><a href="">サブ03</a></li>
＿＿＿＿＿<li><a href="">サブ04</a></li>
＿＿＿＿</ul>
＿＿＿</li>
＿＿＿<li><a href="">タブ05</a></li>
＿＿＿<li><a href="">タブ06</a></li>
＿＿</ul>
＿</div>

お礼

ご回答ありがとうございます。
参考にさせていただきます。

回答No.1

noname#158634

なんというかどこからツッコめばいいのやら。
まず、大前提としてHTMLの組み方がおかしい。
・クラスもIDもない<div>は何？何もしないボックスを作る意味がない。
・一つしかないものにはクラスではなくIDを使うべき。一つのHTML内に同じIDは一度しか使えないがクラスは複数使える。これが転じて、一意の箇所にはID、同じ名前を複数要素につけたい場合はクラスを使うことになっている(もちろんクラスで間違いというわけではない)。
・クラスやIDを付けなければCSSを適用できないわけではないのでむやみに使わないこと。見てのとおりHTMLもCSSも記述が煩雑になっているし、tab_01～06の重複記述の嵐は見るに堪えない。セレクタについての基礎知識を身に着けてください。

で。
画像はよく見えないわ「テキストを画像の後ろに含める」が意味不明だわでもう何とも言えない。
こんな煩雑なコードを張り付けるくらいなら、これがどういう動作を想定しているのかくらい書いてください。わざわざ意味を読み取ってあげるのは回答者の仕事じゃない。
ただ、あなたの身に余ることをしようとしていることだけは分かります。ちゃんと基本的なことを覚えずに変な洒落っ気を出しても、今のように手に負えなくなるのは明白。まずはきちんと基本を身につけましょう。