0

私は学校のプロジェクトのウェブページに取り組んでいますが、特別なことは何もありません。IE でサイトをほぼ完成させましたが、Chrome で開こうとすると、まったく異なります。誰かアイデアがあれば助けてください。

__HTML____

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head>
    <title>The Corner Shop</title>
    <link rel="stylesheet" type="text/css" href="realstyle.css" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   </head>
  <body>
    <div id="menu1">
      <ul id="list-nav">
        <li>HOME</li>
        <li><a href="About us.html">ABOUT US</a></li>
        <li><a href="Menu.html">THE MENU</a></li>
        <li><a href="Gallery.html">THE GALLERY</a></li>
        <li><a href="Contact details.html">CONTACT US</a></li>
      </ul>
    </div> <!-- menu1 -->
    <div id="contentwrap">
      <div id="heading">
        <a href="index.html">
          <img border="0" src="GalleryI/Logo.jpg" width="170" height="150" alt="Logo" />
        </a>
      </div> <!-- heading -->
      <div id="content">
        <br />
        <br />
        <p id="texttitle">"The best burger joint around."</p>
        <p>Prepared and served with a passion.</p>
        <p id="textstuff">Using the freshest and best Australian ingredients, just for you.</p>
        <br />
        <br />
        <br />
        <p> This weeks special:</p>
        <br />
        <br />
        <img border= "5" src="GalleryI/beefburger.jpg" alt="Beef Burger Supreme" height="250" width="250" />
        <p>The Beef Burger Supreme $5.50</p>
      </div> <!-- content -->
    </div> <!-- contentwrap -->
  </body>
</html>

__CSS____

body {
  background-image: url("GalleryI/Background3.jpg");
  margin:0;
  padding:0;
}

a:link {
  color: White;
  text-decoration: none;
}

a:visited {
  color: White;
  text-decoration: none;
}

ul#list-nav {
  margin:0;
  margin-top: 0px;
  padding:0;
  list-style:none;
  font-family: Impact, Arial, sans-serif;
  text-transform:uppercase !important;
  font-size: 20px;
  float:left;
  /* text-decoration: bold; */
  white-space: nowrap;
}

ul#list-nav li {
  display:inline;
  color:white;
  position: relative;
  letter-spacing:2px;
  line-height:35px;
  /* margin:right; */
  color:#CD2626;
  padding: 25px 25px 0px 30px;
}

ul#list-nav li a {
  text-decoration:none;
  color:#ffffff;
  /* float:left; */
}

ul#list-nav li a {
  text-align:center;
}

ul#list-nav li a:hover {
  color:#CD2626;
}

#menu1 ul {
  text-align:center;
  width:100%;
  background:#000000;
}

#heading {
  height: 150px;
  width: 780px;
  background-image: url("GalleryI/fast-food-burger1.jpg");
  color: white;
  padding:5px 5px 5px 5px;
  text-align:left;
  margin:0 auto; 
  border: #000 5px solid;
}

#content {
  width: 800px;
  height: 650px;
  background-color: #090909;
  color: white;
  border-top: #000 5px solid;
  border-bottom: #000 5px solid;
  font-size: 18px;
  text-align:center;
  font-family: arial,sans-serif;
  color: #CCC;
  margin:0 auto;
  margin-top: 10px;
}

#contentmenu {
  width: 800px;
  height: 850px;
  background-color: #090909;
  color: white;
  border-top: #000 5px solid;
  border-bottom: #000 5px solid;
  font-size: 18px;
  text-align:center;
  font-family: arial,sans-serif;
  color: #CCC;
  padding:20px 0px 5px 0px;
  margin-top: 10px;
}

#contentwrap {
  text-align:center;
  width:100%;
  opacity:0.9;
  filter:alpha(opacity=90);
  background-color: red;
  margin-top: 0px;
  padding: 10px;
}

#texttitle {
  font-size: 24px;
  color: #CCCCCC;
  font-family: arial,sans-serif;
  font: italic bold;
}

#textstuff {
  font: arial,sans-serif;
  font-size: 18px;
}

#aboutuscontent {
  font: arial,sans-serif;
  font-size: 17px;
  padding: 10px 50px 50px 50px;
  text-align: left;
  margin: 40px;
}

#thing {
  color: red;
  font-size: 24px;
}

#thing2 {
  color: red;
  font-size: 24px;
}

#menutable {
  width: 700px;
  color: white;
  font-family: arial,sans-serif;
}

リンクしていない他のページに影響を与えているため、これのいくつかは意味がありませんが、基本的には、これは IE では正常に動作しますが、これは Chromemenu1 divの内部にありcontentwrap divます。なぜこれが起こっているのかわかりません。誰でも私を助けることができますか？

4

1 に答える 1

0

あなたのコードを Chrome に持ってきて、少しいじってみました。

ここで私が何をしたかを見ることができます

次のようなものがあります。

float: left;

あなたのCSSルールの下で

ul#list-nav

私はそれをコメントアウトしました。

念のため: その中の要素を左にフロートさせたい場合は、それらにルールを適用してみてください。ラッパーにオーバーラップさせたい場合は、z-index を設定するか、ラッパーを左にフロートするように適用してみてください。

どうもありがとう、そして幸運を！

于 2012-08-20T01:23:33.100 に答える