Вопрос

Я думаю, что миф о том, что IE - это кошмар для веб-дизайнеров, это правда. IE7 добавляет мне загадочные отступы или поля слева и справа от моего div # image (серый div), а абзац в div # content страдает от CSS свойства тега h2 . Заранее спасибо!

edit: я даже пробовал CSS Reset Эрика Мейера, но это не сработало.

edit2: Я только что обнаружил, что h1 , предшествующий div # image , вызывает проблему, но до сих пор не могу понять, почему.

Internet Explorer 7 Internet Explorer 7 http://www.pixentral.com/pics/13l8JIteyHdBhVVjquJJs/a

Firefox 3 и Google Chrome: Firefox 3 и Google Chrome. а>

МОЙ 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> 

Мой 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;
    }
Это было полезно?

Решение

там написано:

<h1>Featured Projects<h2>

ты уверен, что это твой код? начинается с h1 и заканчивается h2 PS. Определение css box в IE7 отличается, поля и отступы считаются частью ширины, в новых браузерах они добавляются к ширине

scroll top