プレビュー画面でリストマークが消えない

質問

いつもお世話になります。

DW CS3でナビゲーションバーを作成しようとしているのですが、CSSでlist-style:none;やlist-style-type:none;にしてもリストマークが消えてくれません。
さらにfloat:left;を使っても横並びになってくれません。

デザイン画面ではリストマークも消え横並びになっているになぜかプレビューで確認すると反映されていないのです。

HTMLおよびCSSは下記の通りです。
どなたか詳しい方、ご教授願います。

HTML
<div id="nav">
<ul>
<li class="nav01"><a href="#0"><img src="images/keybridge.gif" border="0" /></a></li>
<li class="nav02"><a href="#n" class="style14">News</a></li>
<li class="nav03"><a href="#s" class="style14">Schedule</a></li>
<li class="nav04"><a href="#a" class="style14">Access</a></li>
</ul>
</div>

CSS
#nav {
background:#FFFFFF
}
#nav ul{
width:100%;
margin:0 auto;
overflow:hidden;
}
#nav li {
width:25%;
float:left;
list-style:none;
}
#nav a{
display:block;
text-align:center;
text-decoration:none;
}
#nav a:hover{
background:#CCCCCC
}

回答No.1

ORUKA1951 · ベストアンサー

原因は分かりかねます。
　⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )
でチェックしてみてもよいかも・・
　※ 日本語が入っていて、文字コードの指定との兼ね合いであるところ以降のスタイルが無視されるとか。

　list-style-type:は本来はリスト項目(Applies to:elements with 'display: list-item' )に対する指定ですが、ひょっとしてプレビューツールが誤っている可能性があります。継承されるプロパティ(Inherited:yes) ですので、下記のような記述することができます。

<div class="header">
　<div class="nav">
　　<ol>
　　　<li><a href="#TOP"><img src="images/keybridge.gif" border="0" alt="トップ"></a></li>
　　　<li><a href="#News" class="style14">News</a></li>
　　　<li><a href="#Schedule" class="style14">Schedule</a></li>
　　　<li><a href="#Contact" class="style14">Access</a></li>
　　</ol>
　</div>
<div>
だったとします。
div.header div.nav ol,div.header div.nav ol li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;/* これも継承する */
position:relative;/* 継承しない */
line-height:30px;
height:30px;
}
div.header div.nav ol:after{content:"";display:block;clear:left;}
div.header div.nav ol li{
width:24%;/* 25%じゃ折り返されることがある(borderをつけたとき) */
float:left;/* 本来はdisplay:inline-block; */
}
div.header div.nav ol li a{
display:block;width:100%;height:100%;
text-decoration:none;
background-color:white;
}
div.header div.nav ol li a:hover{
background-color:yellow;/* keywordで指定できる16色はkeyword */
}

とか、header,navはひとつのHTML内に何度も登場するものなのでclassにしておき、スタイルシートは子孫セレクタを使って区別する!!
　上記の例だと、headerDIV内のnavDIV内のol,liについてという意味ですね。
　セレクタの書き方を身につけないとHTMLが煩雑（当然スタイルシートも）になりますよ。ただし、DWは面倒見てくれません。

お礼

ORUKA1951さん、いつもありがとうございます。

ご紹介頂いたCSS検証サービスでは
「エラーはありません。CSSレベル3」と出ました。

ちなみに、この部分のみHTMLとCSSを抜き出して新規のページで試してみたところうまく作動致しました。

＞日本語が入っていて、文字コードの指定との兼ね合いであるところ以降のスタイルが無視されるとか。
CSSに日本語は入ってないのですが、何かが干渉してこの部分（ページ最下部に設置）だけスタイルが無視されているようなのです。
実際のところこの部分以外のCSSはすべて反映されています。

もう一度最初から作り直したほうが得策なのでしょうか。

いつもいち早くお答えいただいているORUKA1951さんには感謝致します。
取り急ぎお礼まで。

補足

CSSを始めから書き直しているところ
問題個所の一つ上のCSSを閉じていませんでした。これ→ ｝（汗）

お騒がせして大変申し訳ございませんでした。
ORUKA1951さん、お忙しいところありがとうございました。