0

今まではSafariを使ってレイアウトを表示してきました。Safari では、ロゴ、ナビゲーション バー、ヘッダー画像、2 列の本文領域を含むシンプルなレイアウトで、すべてが私が望んでいたとおりに完璧に表示されました。ただし、Firefox では、ヘッダー画像とロゴの両方が表示されず、ボディ領域の 2 列のフロートが機能せず、代わりに 1 つに沈み込んでいます...何が起こっているのか、またはどのような問題があるのか​​ わかりません私は他のブラウザで遭遇しますが、誰かが間違っていることを見つけることができるかもしれません:

body {
background-color: some color;
background-attachment:fixed;
margin: 0;
padding: 0;
}

#wrapper {
 width: 950px;
 background-color: some color;
 margin: 0 auto;
 text-align: left;
 border-right: 1px solid some color;
 border-left: 1px solid some color;
}

#logo {
 background-image: url('some url');
 height: 100 px;
 text-align: left;
 border-style: none;
}

#navigation {
 background-color: some color;
 text-align: center;
 border-top: 2px solid some color;
 border-bottom: 2px solid some color;
 height: 30 px;
}

#navigationElement { 
 display: inline-block;
 padding-top: 2 px;
 padding-left: 10 px;
 padding-right: 10 px;
 border-style: none;
}

#navigationElement a:link { 
 color: some color;
 text-decoration: none;
}

#navigationElement a:hover { 
 color: some color;
 font-weight: bold;
}

#headerImg {
 background-image: url('some url');
 height: 200 px;
 text-align: left;
 border-style: none;
}

#left {
 background-color: some color;
 width: 475 px;
 float: left;
 text-align: center;
 border-style: none;
}

#leftElement {
 background-color: some color;
 padding: 40 px;
 text-align: center;
 border-style: none;
}

#right {
 background-color: some color;
 width: 475 px;
 float: right;
 text-align: center;
 border-style: none;
}

#rightElement {
 background-color: some color;
 padding: 40 px;
 text-align: center;
 border-style: none;
}

#footer {
 background-color: some color;
 height: 40 px;
 text-align: left;
 border-style: none;
 clear: both;
}

htmlコードは次のとおりです。

<body>
<div id="wrapper">

<div id="logo"></div>

<div id="navigation">

<div id="navigationElement"><a href="link1">nav 1</a></div>
<div id="navigationElement"><a href="link2">nav 2</a></div>
<div id="navigationElement"><a href="link3">nav 3</a></div>


</div>

<div id="headerImg"></div>

<div id="bodyArea">

    <div id="left">

        <div id="leftElement">
        left element text 1 
        </div>

        <div id="leftElement">
        left element text 2
        </div>

    </div>

    <div id="right">

        <div id="rightElement">
        right element text 1 
        </div>

        <div id="rightElement"> 
        right element text 2
        </div>

    </div>

    <div id="footer">some footer text</div>

</div>


</body>
4

2 に答える 2