28202 sujets

CSS et mise en forme, CSS3

Margin-top inefficace sous ie si frère en pos absolute

Bonjour à tous,

Je suis confronté à un problème sous ie 6 et 7.

Code HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>________</title>

<link type="text/css" rel="stylesheet" href="veosearch.css" />

</head>

<body>

<div id="global">

	<div id="logo-moteurs"><img src="images/logo-moteurs.png" alt="" /></div>
        <div id="login-top">
    	<p id="nbr-soutien"><a href="#">Vous soutenez <strong>0</strong> projet</a></p>
        <p id="login-info"><a href="#">Inscrivez-vous</a></p>
    </div>
    
    <div id="recherches">
    	<img src="images/logo.png" alt="" />
    	<p><a href="#" class="current">Web</a> | <a href="#">Image</a> | <a href="#">Blog</a> | <a href="#">Vid&eacute;o</a> | <a href="#">Wiki</a></p>
    
    	<div id="recherche-barre">
            <form action="#" method="post">
                <p id="textbox"><input type="text"  /></p><p><input type="image" src="images/background-recherche-barre-droite.png" /></p>
            </form>
        </div>
        
        <p id="slogan">Donnez du sens &agrave; votre recherche !</p>
    </div>

	<div id="contenu">
   
    	<div class="info">
        	<h1>1 RECHERCHE = 1 DON</h1>
        </div>
        
    	<div class="info">
        	<h1>LEURS PROJET EN VID&Eacute;O</h1>
        </div>
        
        <div class="info">
        	<h1>LE CONSEIL DU JOUR</h1>
        </div>

    </div>
   
    <div id="bottom">
    	<p>
        	<strong>
            	<a href="#">Projets</a> | 
                <a href="#">Associations</a> | 
                <a href="#">Qui sommes nous ?</a> | 
                <a href="#">Nous aider</a> | 
                <a href="#">Blog</a>
            </strong>
        </p>
    </div>
    
    <div id="bottom2">
    	<p>
        	<a href="#">Charte</a> | 
            <a href="#">F.A.Q.</a> | 
            <a href="#">Partenaires</a> | 
            <a href="#">Contacts</a> | 
            <a href="#">Presse</a> | 
            <a href="#">Mentions L&eacute;gales</a>
        </p>
    </div>
  
</div>

</body>
</html>


CSS


* {
	margin:0px;
	padding:0px;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#1070b3;
}

a { color:#1070b3; text-decoration:none; }
a:hover { text-decoration:underline; }

div#global {
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
	width:990px;
}

div#logo-moteurs {
	position:absolute;
	top:0px;
	left:0px;
}

div#login-top {
	position:absolute;
	top:0px;
	right:0px;
	background-image:url(images/background-login.png);
	width:279px;
	height:31px;
	line-height:31px;
}

div#login-top p { float:left; text-align:center; }
div#login-top p#nbr-soutien { width:156px; }
div#login-top p#login-info { width:123px; font-weight:bold; }

div#recherches {
	position:relative;
	margin:60px auto 0px auto;
	width:442px;
	text-align:center;
	border:1px solid black;
}

div#recherches p { text-align:left; color:#ccc; }
div#recherches a.current { font-weight:bold; }

div#recherche-barre {
	margin:3px 0px;
	text-align:left;
	height:27px;
}

div#recherche-barre p { height:27px; float:left; }
div#recherche-barre p#textbox {
	width:412px;
	background-image:url(images/background-recherche-barre-gauche.png);
	text-align:center;
}

div#recherche-barre p#textbox input { margin-top:4px; width:400px; border:0px;  }

div#recherches p#slogan {
	color:#b3c2e1;
	text-align:right;
	font-size:14px;
	font-weight:bold;
}

div#contenu {
	position:relative;
	margin:30px auto 0px auto;
	width:807px;
	height:156px;
	
	border:1px solid;
}

div#contenu div.info {
	float:left;
	
	width:247px;
	height:156px;
	
	background-image:url(images/background-contenu-index.png);
	margin:0px 11px;
}

div#contenu div.info h1 {
	text-align:center;
	color:#f29400;
	font-size:14px;
}

div#bottom {	
	position:relative;
	margin:20px auto 0px auto;
	width:807px;
	height:21px;
	line-height:21px;
	background-image:url(images/background-bottom.png);
	background-repeat:no-repeat;
	background-position:center;
	text-align:center;
}

div#bottom2 {
	position:relative;

	text-align:center;
	font-size:11px;
}

div#bottom3 {
	position:relative;
	margin-top:10px;
	text-align:center;
}

div#bottom3 a {
	font-weight:bold;
	text-decoration:underline;
}


Mon problème viens du margin:60px auto 0px auto; de la div recherches. Sous ie 6 et 7 si j'affiche les deux div en absolute (et seulement dans se cas la) le top de la margin ne s'effectu pas Smiley ohwell

Pouvez-vous m'aidez à comprendre ce qu'il se passe ?
Modifié par Gnarkk (21 Sep 2007 - 11:54)
Bonjour,
en position:absolute, le bloc est sorti du flux donc ses marges ne se
calculent pas à partir des éléments frères (au même niveau dans l'arbre du
document) mais par rapport au premier élément ancêtre positionné
(le plus souvent en position:relative) ou à default par rapport à la zone de visualisation.
Modifié par Hermann (20 Sep 2007 - 18:02)
Bonjour et merci de la réponse Smiley cligne

Je suis tout à fait d'accord avec toi, d'ailleur j'ai positionné ma div global en relative juste pour pourvoir positionner ses enfants par rapport à elle.

Ensuite mes deux div absolute (qui sont dans ma div positionnée en relative) s'affichent sans problèmes par contre la div suivante (soeurs des deux absolute et fille de la globale relative) voit sont margin-top ne pas fonctionner sous ie.

D'après mois, comme elle est positionné en relative, le margin-top doit la faire se décaller par rapport à la div parente.

En faite je pense que c'est un bug provenant d'ie (pour changer ^^) je voudrai juste être sur qu'il ne sagit pas d'une erreur de raisonement de ma part.
Gnarkk a écrit :
En faite je pense que c'est un bug provenant d'ie (pour changer ^^)

Heu... non, là il s'agirait plutôt d'un bug de Gnarkk, qui demande de l'aide pour un problème de rendu sans même avoir pensé à valider son code HTML. Smiley lol

Cela aurait sans doute permis de déceler l'erreur de syntaxe suivante:
    [b][#red]</div[/#][/b]

    <div id="recherches">
Erreur de syntaxe dont certains navigateurs s'accommodent (Firefox), tandis que d'autres non (Internet Explorer, Opera).

Au passage: tester le rendu dans au moins deux navigateurs (plutôt) conformes est un bon réflexe, avant de chercher nécessairement un bug d'IE. Aucun navigateur n'est une référence parfaitement fiable. Penser donc à utiliser Safari (Mac, et bientôt Windows), Konqueror (Linux), Opera (toutes plateformes), etc.

Bonne continuation. Smiley smile
Modifié par Florent V. (21 Sep 2007 - 10:37)
Pour la div non fermé, vraiment dsl, il sagit d'une erreur de remise en forme pour le forum (lors de mon copier/coller).

J'ai effectivement passé mon code au validator du w3c et mon code est valide 1.0 strict.
Ah oui, j'avais pas vu la différence de marge une fois l'erreur de syntaxe corrigée.

Déjà, tu as un cas de fusion des marges entre blocs imbriqués: la marge supérieure de div#recherches se transmet à div#global. Si ce comportement n'est pas souhaité, on pourra faire: 
div#global {padding: 1px 0;}


Et effectivement, une fois ce problème écarté, il nous reste celui que tu décris: la présence des deux blocs positionnés en absolu déclenche une «suppression» ou un «écrasement» du margin-top de div#recherches.

Pour le coup, ça semble bien être un bug d'IE. On peut éviter ce problème, semble-t-il, de deux manières:
- en évitant de conférer le layout à div#global;
- en évitant de conférer le layout à div#recherches, par exemple en se passant de largeur fixe: 
div#recherches {
	margin: 60px 272px 0px 272px;
}


À propos du layout: Avoir le layout - Le concept de hasLayout dans IE/Win.

Une autre solution, un peu bourrin, consiste à placer un élément en positionnement statitique juste avant div#recherches. Exemple: 
<div style="height: 1px; overflow: hidden; font-size: 1px; line-height: 1px;"></div>
Et bien merci pour cette réponse !

Je ne connaissais pas le cas de fusion des marges entre blocs imbriqués. Aujourd'hui j'ai remplacé le margin-top de la div recherche par un padding-top sur la div global (j'utilise très rarement les padding à cause des différences de gestions des marges d'ie6 mais la ça passe sans casse).

En tout cas merci encore pour ta réponse et les liens qui l'accompagne ça me permet de comprendre certain comportement que je ne connaissais pas !

Au passage merci à alsacréation pour la qualité de son contenu !

A bientôt Smiley cligne
Sujet clos
Aller à