※ ChatGPTを利用し、要約された質問です(原文:FireFoxでのレイアウト表示崩れについて)
FireFoxでのレイアウト表示崩れについて
このQ&Aのポイント
FireFoxでのレイアウト表示崩れについて解説します。
FireFoxでCSSレイアウト表示が縦に並ぶ問題の解決方法について説明します。
FireFoxでのレイアウト表示の問題を解決するためのCSSコーディングのポイントを紹介します。
現在ホームページを作成しています。
CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。
IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。
よろしくお願いします。
以下ソース
◇HTML部分◇
<body>
<div id = "wrap">
<div class = "header">
<div id = "h_wrap">
</div>
<div id = "u_wrap">
<u class="hnavi">
<li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li>
<li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li>
<li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li>
<li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li>
<li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li>
<li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li>
</u>
</div>
</div><!-- /header -->
<div class = "topwrap">
topimg
</div><!-- /topwrap -->
<div id = "inner">
<div = "mainwrap">
mainwrap
</div><!-- /mainwrap -->
<div = "sidewrap">
sidewrap
</div><!-- /sidewrap -->
<div class = "clear"><hr /></div>
</div><!-- /inner -->
<div id = "footer">
footer
</div><!-- /footer -->
</div><!-- /wrap -->
</body>
◇CSS部分◇
body {text-align:center;}
#wrap {width:900px; margin:0 auto; text-align:left; }
.header {height:130px; }
.topwrap {height: 300px;}
#inner { margin:0 10px; }
#mainwrap {width:690px; float:left; }
#sidewrap {width:170px; float:right;}
.clear {clear: both;}
.clear hr {display: none;}
.footer {height:118px;}
/*-----------------------------------------------------
headder
---------------------------------------------------- */
#h_wrap {height: 80px;}
#u_wrap { height: 60px; margin: 0; padding: 0; }
.hnavi { margin: 0; padding: 0; }
.hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; }
以上です。
宜しくお願いします。
お礼
ありがとうございます。 よく見るとuタグでした… ulに変更したらうまくいきました。