28172 sujets

CSS et mise en forme, CSS3

[Résolu] Margin persistante haut de page

Bonsoir!

Je viens de commencer un document. Et impossible d'enlever la margin du body au niveau margin-top...

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="fr"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="fr"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="fr"><!--<![endif]-->
<head>
    <meta charset="utf-8"/>
    <title>bla</title>
    <link rel="stylesheet" media="screen" href="css/styles.css"/>
    <script src="js/modernizr.js" type="text/javascript"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="langues">
                <ul>
                    <li><a href="#">Français</a></li>
                    <li><a href="#">Neederlands</a></li>
                    <li><a href="#">English</a></li>
                    <li><a href="#">Deutsche</a></li>
                </ul>
            </div>
            <div class="logo-titre">
                <p><img src="img/logo.png" width="100" height="97" alt="bla"></p>
                <h1>Blablabla</span></h1>
            </div>
            <div class="menu"> 
                <ul>
                    <li><a href="#">La maison</a></li>
                    <li><a href="#">Contact & Plans</a></li>
                    <li><a href="#">Photos</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>


@import "fonts.css";

article, aside, details, figcaption, figure, footer, header, hpgroup, menu, nav, section{
	display: block;
}

.clearfix:before, .clearfix:after{
     content: " ";
     display: table;
     color: #000000;
}

.clearfix:after{
     clear: both;
}

.lt-ie8 .clearfix{
     height: 1%;
}

body{
	background: #bbb1a0 url(../img/light_toast.png) 0 0 repeat;
	font: normal 75%/1.5 Helvetica, Arial, sans-serif;
	color: #000;
	margin: 0;
	padding: 0;
}

.container {
    width: 100%;
/*    min-width: 800px;
    max-width: 1600px;*/
    margin: 0 auto;
}

.header {
    margin: 0;
    padding: 0;
}

.langues
{
    height: 20px;
    background: red;
}

.langue ul {
    text-decoration: none;
}

.langues li {
    list-style: none;
    float: left;
}


J'étais persuadé qu'il suffisait de mettre un margin et padding 0 sur le body ? Mais apparemment non ..
un problème de margin collapsing ? mais où ? je n'ai aucune marge nulle part encore à part les marges par défaut du navigateur ..
Ok merci! Donc plus de précisions pour ceux qui pourraient passer par ici avec le même problême..

C'était en effet un problème de margin collapsing couplé avec le display particulier que sont les listes.

L'ajout sur la div contenant ces éléments (liste) d'un overflow:hidden; ou en encore d'un padding: 1px 0; est à même de résoudre le problème..

Ou encore l'utilisation des float sur ces éléments, ou encore d'un display:inline-block; (qu'il faut faire en toute connaissance de cause, ou encore en cas de véritable nécéssité)

Voilà (corrigez mes erreurs si elles sont trop grosses ^^)
Et concrètement ça donne quoi dans la css ? Car moi j'ai beau mettre dans ma css :

body {
margin:0px 0;
padding:0px 0;
margin-top:-14px 0;
top:-15px 0;
margin-bottom:14px;
overflow:hidden;
}


il y a toujours une marge de 15 pixels "vides" en haut de la page sur IE 9...
Modifié par Aon (07 Nov 2012 - 17:23)
Sujet clos
Aller à