ワードプレスのＨＰでテンプレートが崩れてしまいました。原因についてお気づきの点があればご指摘お願いします。

Question

###前提・実現したいこと
ワードプレスで作成されたホームページを直すように、上司から命令されています。作られた方は退職され、周囲にも詳しい方が全くいません。有益なアドバイスをいただければ幸いです。

テンプレートを直しているうちに、インターネットエクスプローラーでは、くずれないのですが、ファイアーフォックスでは、崩れているというご指摘が外部の方からありました。

ヘッダー（php）とスタイルシート（css）を直しているうちに、なってしまったので、ヘッダーあるいはスタイルシートが原因かと思うのですが、とりあえず、ヘッダーの方をアップします。

###発生している問題・エラーメッセージ
このように、崩れてしまっています（firefoxの場合）。
四角の白抜きには、文字がはいります。

###該当のソースコード
/headder/
#header {
/*固定設定
position:fixed;
top:0px;
*/
}
#header a {
display:block;
height:80px;
background:url(images/header2.gif);
text-indent: -1000em;
}

/menu/
#menu {
/*固定設定
position:fixed;
top:80px;
*/
width:930px;
background:#f1f0ed;
height:51px;
}
#menu ul {
padding:3px 0px 0px 0px;
}
#menu li {
width: 100px;
height: 45px;
float: left;
padding:0px 0px 0px 10px;
}
#menu li a {
display: block;
width: 100%;
height: 100%;
background-image: url(images/menu_btn3.gif);
background-repeat: no-repeat;
text-indent: -1000em;
}
.menu1 a {background-position: 0px 0px;} /☓☓☓☓/
.menu2 a {background-position: -100px 0px;} /☓☓☓☓/
.menu3 a {background-position: -200px 0px;} /☓☓☓☓/
.menu4 a {background-position: -300px 0px;} /☓☓☓☓/
.menu5 a {background-position: -400px 0px;} /☓☓☓☓/
.menu6 a {background-position: -500px 0px;} /☓☓☓☓/
.menu7 a {background-position: -600px 0px;} /☓☓☓☓/
.menu8 a {background-position: -700px 0px;} /☓☓☓☓/

/*マウスオーバー
.menu1 a:hover {background-position: 0px -45px;}
.menu2 a:hover {background-position: -100px -45px;}
.menu3 a:hover {background-position: -200px -45px;}
.menu4 a:hover {background-position: -300px -45px;}
.menu5 a:hover {background-position: -400px -45px;}
.menu6 a:hover {background-position: -500px -45px;}
.menu7 a:hover {background-position: -600px -45px;}
.menu8 a:hover {background-position: -700px -45px;}
*/

###試したこと
崩れる前のコピーはとっておいたので、それを張り付けなおしてのですが、戻らないので、張り付ける際になにか手違いもあったかもしれません。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
###前提・実現したいこと
ここに質問したいことを詳細に書いてください
(例)PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[Lhankor_Mhy]

サイトを見せていただくのが一番早いと思うのですが、難しいようでしたら、とりあえずHTMLをご提示ください。

[RobotK]

http://naganomaibun.or.jp/です。よろしくお願いします。

[m.ts10806]

プログラムコード(およびエラーメッセージ)は```で囲ってください。（わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください）　また質問テンプレート部分がたくさん残っているように見受けられます。大事な質問内容が埋もれてしまうことにもなりかねないので質問と関係のない部分は精査願います。

[m.ts10806]

GoogleChromeでも同様のデザイン崩れを確認しました。

[RobotK]

ご指摘ありがとうございました。

Answer 1

       <li class="menu8"><a href="http://naganomaibun.or.jp/?cat=72">遺跡解説板</a></li>

ここの行頭に全角スペースが入っていますので、削除してください。

Comments

[RobotK]

やってみます。

[RobotK]

直りました。本当にありがとうございました。

Answer 2

Chromeの開発ツールで調整してみたのですが#menu liのpaddingが0px 0px 0px 10px;となっている10pxの部分を8px以下にすれば、一応崩れはおさまるようです。
IEの方では確認できてないですが、とりあえず参考まで。

Comments

[RobotK]

ありがとうございました。勉強させていただきます。

[m.ts10806]

全角気づきませんでした。。。
こちらは本件の解決策としてはちょっと強引な例となるので、デザイン調整の参考程度にとどめておいてください。

[RobotK]

承知しました。迅速なアドバイスいただき、感謝申し上げます。