Legendary Annoyance von IE6 Marge und padding „Verhalten“ (Hilfe!)

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

Frage

Alles ist in Ordnung in Chrome, FF und IE8. Aber in IE6 gibt es einen seltsamen Rand direkt unter den div "mittleren Spalt" (im Innern gibt es 3 divs genannt featured1, 2 und 3. ), die oben ist die divs "links Spalte" und "rechte Spalte" ). Ich habe bereits versucht, alles dieses Problem loszuwerden. Ich versuchte, die „display: inline-Technik“ und CSS setzt. Bitte um Hilfe! Ich teste meine Website hier

MY HTML: 

<body id="home">
<!-- header -->
<div id="header">
    <div class="container">
        <h1><a href="http://widerdesign.co.nr/">wider design</a></h1>
        <!-- navigation -->
        <ul id="navigation"> 
            <li class="home"><a href="index.php"><span>home</span></a></li>
            <li class="portfolio"><a href="portfolio.php"><span>portfolio</span></a></li>
            <li class="about"><a href="about.php"><span>about</span></a></li>
            <li class="contact"><a href="contact.php"><span>contact</span></a></li>
        </ul>
    </div>
</div>
<div id="content">
    <div id="top-column">
        <p>We <strong>design and develop</strong> clean and effective webs in the <strong>top 3 languages</strong> 
        on the Internet. Internet is mean to reach the whole world.You are mean to reach the whole audience:</p> 
    </div>
    <div id="middle-column">
        <h2>Featured Projects</h2>
        <div id="featured1">
            <a href="contact.php" target="_blank"><img alt="" src="images/project1.png"/></a>
            <p>Featured work number 1</p>
        </div>
        <div id="featured2">
            <a href="contact.php" target="_blank"><img alt="" src="images/project2.png"/></a>
            <p>Featured work number 2</p>
        </div>
        <div id="featured3">
            <a href="contact.php" target="_blank"><img alt="" src="images/project3.png"/></a>
            <p>Featured work number 3</p>
        </div>
    </div>
        <div id="left-column">
            <h2>Web Design</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 id="right-column">
            <h2>Web Translation</h2>
            <p></p>
        </div>
    </div>
<div id="footer">
    <div class="container">

    </div>
</div>
<script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-11932489-1");
    pageTracker._trackPageview();
    } catch(err) {}
</script>
</body> 
</html>

MY CSS Reset: 

/* reset */
* { 
    margin: 0;
    padding: 0;
}

img {
    border: none;
}

ul {
    list-style: none;
}
/* tags */
body {
    background-color: #FFFFFF;
    color: #757575;
    font-family: Arial, "MS Trebuchet", sans-serif;
    font-size: 75%;
}
h1 {
    background: url(../images/logo.png) no-repeat scroll 0 0;
    margin-bottom: 20px;
    text-indent: -9999px;
}
h2 {
    color: #669BD9;
    font-family: Arial;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 10px;
}
a {
    font-family: Arial, "MS Trebuchet", sans-serif;
}
/* classes */
.container {
    margin: 0 auto;
    width: 960px;
}

Meine CSS-Struktur: 

#content {
    background-color: #FFFFFF;
    padding: 20px;
    overflow: hidden;
    margin: 0 auto;
    width: 960px;
}

#content h2 {
    border-top: 1px dashed #C0C0C0;
    border-bottom: 1px dashed #C0C0C0;
    padding: 2px 0 2px 0;
    margin: 15px 0 15px 0;
}

#top-column {
    color: #818181;
    font-size: 16px;
    font-family: Arial, "MS Trebuchet", sans-serif;
    margin: 10px 0 10px 0;
    padding: 10px 0 20px 0;
}

#top-column strong {
    font-weight: normal; 
    color: #3C3C3C;
}

#middle-column div {
    float: left;
    height: 224px;
    width: 320px;
}

#right-column {
    float: left;
    width: 420px;
}
#left-column {
    float: right;
    width: 500px;
}

#footer {
    clear: both;
    background-color: #F0F0F0;
    height: 200px;
}
War es hilfreich?

Lösung

Wenn Sie einen Blick auf div id="slideshow" nehmen, werden Sie sehen, dass es margin:10px auto hat, die im Grunde eine margin-top von 10px anzuwenden sagt, und eine margin-bottom von 10px. IE6 neigt Margen zu verdoppeln so durch margin:5px 0; ihre Anwendung das gleiche anzeigen soll, wie es funktioniert in Firefox, IE8, IE7 und alle anderen aktuellen Browser auf.

- Auch nur als Referenz, die ‚auto‘ Stil in diesem Fall nicht nötig war, dies in der Regel verwendet, wenn Sie ein Element zu machen suchen, um in der Mitte seiner Eltern sitzen. Ein Beispiel hierfür wäre, wenn Sie eine Website anzuzeigen, in der Mitte des Bildschirms wollen würden Sie 'margin:0 auto;'

verwenden

Ich hoffe, das Ihr Problem löst!

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