Mysteriöses Problem mit CSS und Internet Explorer 7

StackOverflow https://stackoverflow.com/questions/1812122

Frage

Ich denke, der Mythos, dass der IE ein Albtraum für Webdesigner ist, ist es wahr. IE7 fügt mir eine mysteriöse Polsterung oder Rand auf der linken und rechten Seite von mir hinzu Div#Bild (der graue Div) und der Absatz in der Div#Inhalt leidet unter den CSS -Propietien der H2 Schild. Danke im Voraus!

EDIT: Ich habe sogar Eric Meyers CSS -Reset ausprobiert, aber es hat nicht funktioniert.

edit2: Ich habe gerade festgestellt, dass das der H1 was vorausgehen Div#Bild verursacht das Problem, kann aber immer noch nicht herausfinden, warum.

Internet Explorer 7 Internet Explorer 7 http://www.pixentral.com/pics/13l8jiteyhdbhvqffods4fquejuv1.jpgg

Firefox 3 und Google Chrome: Firefox 3 und Google Chrome http://www.pixentral.com/pics/1zctvutrqlazx9qkh6ba4vTubwvh9.jpg

Mein HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>globo design</title> 
    <link href="styles/style.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="wrapper">
 <div id="header">
  <img id="globo" alt="globo design" src="images/globo.png">
  <ul id="navigation"> 
      <li class="current"><a href="index.html">Home</a></li> 
      <li><a href="index2.html">About Us</a></li> 
      <li><a href="index3.html">Contact Us</a></li> 
  </ul>  
 </div>
 <div id="featured">
  <h1>Featured Projects<h2>

  <div id="images">

  </div>
 </div>
 <div id="content"> 
  <h2>Page 1</h2> 
     <p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p> 
 </div> 
</div>
</body> 
</html>

Mein CSS:

    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
/*typography*/
h1 {
    color: #808080;
    font-family: Arial;
    font-size: 2em;
    font-weight: normal;
    margin: 20px;
}
/*structure*/
body {
    background-color: #D7D7D7;
    color: #5D5D5D;
    font-family: Arial, "MS Trebuchet", sans-serif;
    font-size: 12px;
}
#wrapper {
    background-color: #FFFFFF;
    width: 960px;
    margin: 0 auto; 
}
#header {
    background-color: #555;
    padding: 10px 10px 0 10px;
}
img#globo {
    margin-bottom: 20px;    
}
ul#navigation {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#navigation li {
    background: url(../images/tab.png);
    float: left;
    margin: 0 2px 0 0;
    padding-left: 10px;
}
ul#navigation a {
    background: url(../images/tab.png) 100% 0;
    display: block;
    float: left;
    height: 2em;
    line-height: 2em;
    padding-right: 20px;
    text-decoration: none;
}
ul#navigation li.current {
    background-color: #48f;
    background-position: 0 -32px;
}
ul#navigation li.current a {
    background-position: 100% -32px;
}
#featured {

}
#images {
    margin-top: 10px;
    background-color: #E7E7E7;
    height: 200px;
}
#content {
    clear: left;
    padding: 10px;
}
    /*typography*/
    h1 {
     color: #808080;
     font-family: Arial;
     font-size: 2em;
     font-weight: normal;
     margin: 20px;
    }
    /*structure*/
    body {
     background-color: #D7D7D7;
     color: #5D5D5D;
     font-family: Arial, "MS Trebuchet", sans-serif;
     font-size: 12px;
    }
    #wrapper {
     background-color: #FFFFFF;
     width: 960px;
     margin: 0 auto; 
    }
    #header {
     background-color: #555;
     padding: 10px 10px 0 10px;
    }
    img#globo {
     margin-bottom: 20px; 
    }
    ul#navigation {
        height: 2em;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    ul#navigation li {
        background: url(../images/tab.png);
        float: left;
        margin: 0 2px 0 0;
        padding-left: 10px;
    }
    ul#navigation a {
        background: url(../images/tab.png) 100% 0;
        display: block;
        float: left;
        height: 2em;
        line-height: 2em;
        padding-right: 20px;
        text-decoration: none;
    }
    ul#navigation li.current {
        background-color: #48f;
        background-position: 0 -32px;
    }
    ul#navigation li.current a {
        background-position: 100% -32px;
    }
    #featured {

    }
    #images {
     margin-top: 10px;
     background-color: #E7E7E7;
     height: 200px;
    }
    #content {
        clear: left;
        padding: 10px;
    }
War es hilfreich?

Lösung

es sagt: 

<h1>Featured Projects<h2>

Sind Sie sicher, dass dies Ihr Code ist? Es beginnt mit H1 und endet mit H2 ps. Die CSS -Box -Definition in IE7 ist unterschiedlich, Ränder und Paddings zählen als Teil der Breite, in neueren Browsern, die sie zur Breite hinzugefügt werden

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top