0

初心者です。
ホームページ制作で行き詰まっています。ブラウザ環境によるCSSレイアウト崩れのアドバイスをご教授下さい。 現在MAC環境、DreamweaverCS4にてホームページを作っています。
CSSにて骨格を形成しているのですが写真の紫部分がSafariでのブラウザ確認時レイアウトが崩れます。
写真上 AがFireFoxにて思い通りに表示されるレイアウト。
写真下 BがSafariでのレイアウト崩れ。（何故か崩れず表示される時もあります！？）
サーバーにアップロード出来る環境ではないので、申し訳ございませんがソースを記させて頂きます。
文字数制限の為HTMLソースを書ききれないのでかなり簡略化致しますと、
<div id="container"> <div id="sidebar1"> <div id="mainContent"> <div id="navi"> <div id="navi2>

<<<CSSソース>>>
body {
margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */
padding: 0;
text-align: center;
color: #000000;
}
.twoColFixLtHdr #container {
width: 1000px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.twoColFixLtHdr #header {
height:20px;
background:#FF0;
padding: 0 20px 0 20px;
}
.twoColFixLtHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.twoColFixLtHdr #sidebar1 {
float: left; /* このエレメントはフローティングエレメントであるため、幅が設定されている必要があります */
height:500px;
width: 170px;
background: #EBEBEB;
padding: 15px 20px 15px 20px;
}
.twoColFixLtHdr #mainContent {
background:#39F;
height:480px;
padding: 0 40px;
margin: 0 10 0 10px;
}
.twoColFixLtHdr #navi {
float:left;
width:270px;
height:100px;
background:#0F0;
text-align:center;

}
.twoColFixLtHdr #navi p {
margin: 0;
padding: 10px 0;
}
.twoColFixLtHdr #navi2 {
height:100px;
background:#93C;
padding: 0 20px 0 20px;
}
.twoColFixLtHdr #navi2 p {
margin: 0;
padding: 10px 0;
}
.twoColFixLtHdr #footer {
height:20px;
background:#FF0;
padding: 0 10px 0 20px;
}

質問者が選んだベストソリューション

Yahoo!知恵袋 5290日前