Проблема отображения CSS / XHTML в Firefox и Chrome - PullRequest
Новая
       20

Проблема отображения CSS / XHTML в Firefox и Chrome

0 голосов
/ 16 октября 2011

В настоящее время проблема с получением CSS для корректного отображения страницы макета. Попытка сделать страницу с двумя столбцами с заголовком, меню, левым / правым столбцом и затем нижним колонтитулом. Все выглядит хорошо, за исключением части меню. Страница корректно отображается в Internet Explorer, но она показывает большой разрыв между началом меню div и ul в Firefox и Chrome. Ниже приведены мои XHTML и 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;
}

1 Ответ

2 голосов
/ 16 октября 2011

Обновите свой стиль Ul С 

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

ДО 

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