Home/ Questions/Q 8397515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T20:48:36+00:00

I am working on a webpage for a school project, nothing special. I have

  • 0

I am working on a webpage for a school project, nothing special. I have just about finished my site in IE, but when i try to open it in Chrome, its completely different, i would love some help if anyone has ideas.

__ 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;
}

Some of this wont make sense because it is affecting the other pages that i didnt link, but basically the thing is, this works fine in IE, but the menu1 div is inside of my contentwrap div in Chrome, i don’t know why this is happening. Can anyone help me out?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I brought it your code up in Chrome and played around with it a little bit.

    You can see what I did here

    It looks like there’s a:

    float: left;

    in under your css rules for 

    ul#list-nav

    I commented that out.

    Just in case: if you wanted the elements inside it to float left try applying the rule to those. If you wanted it to overlap the wrapper try setting a z-index or applying the wrapper to float left as well.

    Thanks much and Good Luck!

    • 0