Des livres incontournables pour tout maîtriser

  • CSS2
  • Réussir son site web avec XHTML et CSS
  • PHP 5 avancé
  • Memento CSS
  • Memento XHTML
  • Ergonomie web
  • Bien rédiger pour le web
Rechercher dans le sujet :
Forum
» CSS et mise en forme
» Bataille avec une fusion de marge
Auteur
rs459
# 08 Feb 2010 - 19:01:45
Citer
41 Posts
 Bonjour,

Je fais appel à vous parce que je comprend plus rien , j'ai un problème de fusion de marge que j'arrive pas à régler sous IE7 (surement IE6).

j'ai lu cet article http://www.alsacreations.com/article/lire/629-fusion-des-marges.html

et j'ai toujours le problème malgré les 3 techniques utilisées. 



<style type="text/css">

			* {

				padding : 0;

				margin : 0;

				border : 0;

			}

			

			html {

				font-size: 100%;

			}

						

			body {

				margin : 0;

				padding : 0;

				text-align : center;

				color : #fff;

				font-family : "Arial", "Courier monospace";

			}

			

			

			#wrap {

				position : relative;

				text-align : left;

				margin : 0 auto;

				width : 1000px;

			}

			

			h1 {

				text-indent : -1500px;

				height : 0;

			}

			

			h3 {

				padding : 5px;

				margin-top : 25px;

			}

			

			p {

				padding : 5px 10px;

				font-family : "Courier monospace";

			}

			

			#divgauche {

				float : left;

				width : 290px;

				padding-top : 375px;

				background : #bae699;

			}

			

			#menu li a {

				display : block;

				font-weight : bold;

				height : 25px;

				line-height : 25px;

				font-size : 20px;

				text-decoration : none;

			}

				

			#divcentrale {

				overflow : hidden;

				margin-top : 50px;

				padding : 275px 25px 25px;

				border : 1px solid #fff;

				float : left;

				width : 649px;

				background : #402b1c;

			}

			

		</style>




<?xml version="1.0" encoding="utf-8"?>

<!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" lang="fr">

    <head>

	<meta http-equiv="content-type" 

		content="text/html;charset=utf-8" />

	<meta http-equiv="Content-Style-Type" content="text/css" /> 

		<title>Mon title</title>

    </head>

    <body>

    	<div id="wrap">

    		<h1>Titre</h1>

			<div id="divgauche">

				<ul id="menu">

				<li><a href="#l">Accueil</a></li>

				<li><a href="#"  class="actuel">Menu</a></li>

				<li><a href="#">Infos Pratiques</a></li>

				<li><a href="#">Photos</a></li>

				<li><a href="#">Contact</a></li>

				</ul>

			</div>

			<div id="divcentrale">

				<h3>Le Machin...</h3>

				<p>Ici du texte du texte du texte</p>

				 <h3>Le Bidule...</h3>

				 

			</div>

    	</div>

    </body>

</html>


mon premier H3 fusionne sa marge avec celle de #divcentrale, j'arrive pas à comprendre pourquoi !

Si vous pouviez m'eclairer, merci.
Modifié par rs459 (08 Feb 2010 - 19:02)
^
Florent V.
# 08 Feb 2010 - 20:06:25
Citer
Administrateur
17162 Posts
 Bonsoir,

Quelques pistes:
- Supprime la déclaration XML. Ça perturbe IE6 (voire IE7?) et ça ne sert à rien.
- Je ne suis pas sûr qu'il s'agisse de fusion des marges ici. IE 6-7 a plutôt tendance, dans les cas particulier, à ne pas appliquer la fusion des marges.
- Il y a un bug d'IE 6-7 qui se nomme le «boudiou mais comment ça se fait que la marge de cet élément elle disparaisse sans laisser de trace?». Ça concerne notamment le margin-top du premier élément placé dans un bloc ayant le layout. Soit ça se règle en jouant sur le HasLayout (de l'élément ou de son parent), soit ça se contourne en virant la marge pour préférer un padding.
http://fvsch.com 
^
rs459
# 08 Feb 2010 - 22:35:05
Citer
41 Posts
 Merci, j'ai opté pour la seule solution qui a fonctionné, un &nbsp; decu

J'ai joué avec zoom, border, padding, overflow rien à faire le bug persiste malgré la suppression de la déclaration XML.

J'aurais pu essayer le padding sur le H3, le seul hic , c'est que ma déco est faite avec les border.
Modifié par rs459 (08 Feb 2010 - 22:37)
^
Prévenir un modérateur
Répondre au sujet
Aller à
Powered by Phedio v3.8.6 beta in 9.2 ms © dew