初めての投稿です。よろしくお願いします。

ビジネスシーン３のテンプレートを使用しています。
ナビゲーションの表示位置を右に20pxずらしたのですが
縦幅が２倍になってしまい、それを調整できず困っています。

navigation ulでmarginのleftを20pxにしてみたら、
画面上では思い通りに表示されているのですが、
ブラウザでチェックしたところ、ナビゲーションの縦幅が
2倍になってしまいました。

この不具合は、どのような設定で治るのでしょうか。
お教え願います。

> 初めての投稿です。よろしくお願いします。
>
> ビジネスシーン３のテンプレートを使用しています。
> ナビゲーションの表示位置を右に20pxずらしたのですが
> 縦幅が２倍になってしまい、それを調整できず困っています。
>
> navigation ulでmarginのleftを20pxにしてみたら、
> 画面上では思い通りに表示されているのですが、
> ブラウザでチェックしたところ、ナビゲーションの縦幅が
> 2倍になってしまいました。
>
> この不具合は、どのような設定で治るのでしょうか。
> お教え願います。

箇条書きリストの左マージンを20ピクセルにするのではなく、
#navigationのpadding-leftを20ピクセルにしてください。

［スタイルの管理］作業ウィンドウの「#navigation」（@layout.cssの中ではなくもうひとつのもの）を右クリックして［スタイルの変更］をクリックして、
［スタイルの変更］ダイアログボックスの［カテゴリ］の中から［ボックス］を開き、
［padding］の「すべて同じにする」のチェックをはずして
［left］を20ピクセルにしてください。

すると、#navigationは

#navigation {
background-color: #545454;
overflow: hidden;
padding-left: 10px;
}

になるはずです。

デザインビューでうまくいってるのにブラウザで見ると縦の幅が2倍になる理由は
コートビューにおいて、リストの終了タグの後に全角スペースが入っている可能性が高いです。
これはExpression Webのバグかもです。

どうぞよろしくお願いします。

wanicanさん、ありがとうございます。
教えていただいたようにしますと、表示位置を右にずらすことはできたのですが
　　20ピクセルずらしたぶんだけ、ナビゲーションの左が白い空白になってしまう。
　　デザイン画面でナビゲーションが左に20ピクセル分飛び出してしまう。
　　ブラウザでチェックすると、
　　　　左の飛び出しは解消できている
　　　　右の白い空白部分はそのままに表示される
　　　　ナビゲーションの高さが依然として２行分の高さになる。
などの不具合が生じています。
それで、スタイルシートに、padding-left: 20px; と直接書き込んでみますと、
　　白い空白は表示されなくなった
　　高さも１行分だけ表示される
ようになったのですが、
　　左は飛び出したままに
なっています。
これを解消するため、＠layout.cssの#navigationのwidthのautoを変更して
　　全体幅(830ピクセル)−左移動の幅(20ピクセル)
としたところ、すべてが思い通りになったのですが、これでいいのでしょうか。

　　
　　

ちなみに、確認したブラウザは何でしょうか？
Firefoxですか？Safariですか？

まあ、私はIE7しか確認してないのである意味ずぼらかもしれませんが（汗

Webサイトテンプレートは結構複雑なCSS構造になっているので、
私見では、ダミーテキストを置き換えて使ってくださいね、というものにすぎないと思っています。
CSSを思い通りにカスタマイズしたい場合は、テンプレートを使わずに真白な状態から作ったほうが早かったり、みたいな気がしないでもないです。

結果的に意図通りに表示されたのでしたら、それでOKではないでしょうか？

てか、#navigation ul の左マージンは解除されたんですよね？

よろしくお願いします。

ありがとうございました