CODEWITHSUNDEEP
htmlcssfirefoxgoogle-chromexhtml
KennyH
KennyH

Reputation: 773

CSS/XHTML Display Issue on Firefox and Chrome

Currently having an issue with getting the CSS to display a mockup page correctly. Attempted to do a two column page with a header, menu, left/right column and then the footer. Everything looks good except for the menu portion. The page displays correctly in internet explorer, but it shows a large gap between the start of the menu div and the ul on Firefox and Chrome. Below are my XHTML and CSS.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTMl 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
    <title>Template</title>
    <link rel = "stylesheet"
          type = "text/css"
          href = "Layout.css" />
  </head>

  <body>

  <div id = "all">

      <div id = "head">
        <p>Header</p>
      </div>

      <div id = "menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Weapons</a></li>
          <li><a href="#">Characters</a></li>
          <li><a href="#">Collectables</a></li>
          <li><a href="#">Multiplayer</a></li>
        </ul>
      </div>

      <div id = "left">
        <p>Left Content</p>
      </div>

      <div id = "right">
        <p>Content</p>
      </div>

      <div id = "footer">
        <p>Footer</p>
      </div>

    </div>

  </body>

</html>

CSS

#all {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

#head {
  background-color: black;
  border: black solid 1px;
}

#menu {
  width: 100%;
  background-color: red;
  float: left;
}

#menu ul {
  margin-left: -2.5em;
}

#menu li {
  list-style-type: none;
  float: left;
  width: 8em;
  text-align: center;
  border: black solid 1px;
}

#menu a {
  display: block;
  text-decoration: none;
  color: white;
}

#menu a:hover {
  background-color: yellow;
}

#left {
  float: left;
  width: 200px;
  background-color: red;
  min-height: 30em;
}

#right {
  float: left;
  width: 600px;
  background-color: gray;
  min-height: 30em;
}

#footer {
  clear: both;
  color: white;
  background-color: black;
  text-align: center;
  min-height: 30px;
}

Upvotes: 0

Views: 595

Answers (1)

Sanooj
Sanooj

Reputation: 2637

Update Your Ul style From 

#menu ul {
  margin-left: -2.5em;
}

TO

#menu ul {
margin: 0;
padding: 0;
}

Upvotes: 2

Related Questions