0
Tout est OK dans Chrome, FF et IE8. Mais dans IE6 il y a une marge étrange juste en dessous du div « middle-colonne » (à l'intérieur il y a 3 divs appelés featured1, 2 et 3.) qui est au-dessus les divs « gauche colonne » et " colonne de droite "". J'ai déjà tout essayé pour me débarrasser de ce problème. J'ai essayé le "display: inline technique" et les réinitialisations CSS. S'il vous plaît aidez! Je teste mon site hereContrariété légendaire de la marge de IE6 et du "comportement" de remplissage (Aide!)
MON 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;
}
Mon CSS Structure:
#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;
}
Je viens de réaliser que IE ajoute une marge (ou padding) pour chaque div #featured à l'intérieur de # middle-column. Comment puis-je réparer cela? – alexchenco