Div "default margins" aus dem nichts

selbst nach vielen Zeilen, die ich geschrieben habe in css und html, das css-Verhalten immer noch gelingt, mich zu überraschen - in einem schlechten Weg.

War ich zusammen eine Beispiel-Seite für einen Freund, um ihm zu zeigen, wie er bauen konnte seinem layout,
aber Firefox 3.0.5 und IE8 erstellen Ränder zwischen meine #header, #content und #footer-divs aus dem nichts. Wenn ich den Schalter im IE7-Modus, die Ränder verschwinden.

CSS:

html, body {
   background-color: #fff;
   margin: 0;
   padding: 0;
   width: 100%;
}

#page {
   background-image: url('bg_gradiant.png');
   background-repeat: repeat-y;
   width: 950px; /* 770px + 2 * 90px; */
   margin: 0 auto;
   padding-left: 90px;
}

#header {
   width: 770px;
   margin: 0;
   padding: 0;
}

#header #row1 {
   background-color: #9ab3ba;
   height: 50px;
}
#header #row2 {
   background-color: #517279;
   height: 50px;
}

#content {
   width: 770px;
   background-color: #d7e9ed;
}

#footer {
   background-color: #5eb6cc;
   width: 770px;
   height: 150px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <title>Test</title>
</head>
<body>
<div id="page">
   <div id="header">
      <div id="row1"></div>
      <div id="row2"></div>
   </div>
   <div id="content">
      <p style="height: 600px">Beware of the Content</p>
   </div>
   <div id="footer">
   </div>
</div>
</body>
</html>

Können Sie diese Seite hier: https://codepen.io/lx-s/pen/eRrOpL

Browsen durch die IE Developer Tools und Firebug zeigte mir, dass Sie keine default-margin Werte einstellen, für diese div ' s, aber wie man sehen kann, sind Sie da.
Hoffe Ihr könnt mir einen Tipp geben, wie man loswerden von Ihnen - es ist ernst mich verrückt.

Vielen Dank im Voraus!

InformationsquelleAutor lx. | 2009-07-24
  1. 3

    Es ist nicht das DIV, aber der P-tag, dass hat den Rand gesetzt standardmäßig. Getestet habe ich die Einstellung 0, und der Raum verschwand.

    InformationsquelleAutor Ryan Brunner
  2. 6

    Fügen Sie den folgenden zu Ihrem stylesheet:

    * {
    margin: 0;
}
    InformationsquelleAutor
  3. 3

    Die Ränder sind auf dem p-tag in der #content div

    Hoffe das hilft dir ein wenig

    InformationsquelleAutor Anthony
  4. 1

    Müssen Sie eine reset css. Sie sollten dies tun, auf jeder Web-Seite/Website, die Sie entwickeln. Eine gute CSS-reset entfernen, können viele der Standardeinstellungen und cross-browser Aussehen und fühlen sich viel weniger schmerzfrei.

    Gibt es mehrere von diesen, um wie Eric Meyer ' s oder die Yahoo UI-Reset CSS.

    • danke für den Tipp!
    InformationsquelleAutor cletus
  5. 0

    Als ich gesehen habe das vor, ich habe ein padding-bottom:1px an der Unterseite des enthaltenden DIV-Element, so dass I kann halten die Ränder der Absätze

    Hoffe, das hilft

    • alternativ versuchen Sie es mit der clearfix-Methode auf dem div - Obwohl es nichts schwebte, es scheint zu enthalten, <p>s-Marge.
    InformationsquelleAutor user1010892
Schreibe einen Kommentar