28173 sujets

CSS et mise en forme, CSS3

Padding et margin sur IE

Pages :
Bonjour,

je ne parviens pas à corriger ce pb de marges et espacements sous IE. Tout est Ok avec FX, mais IE place des marges, malgré leur mise à 0 !!!

Voici la page de démo : http://da-bulb.com/test/test.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="testStyles.css">

</head>
<body>
<div id="conteneurGen">

<img src="imgG.gif" alt="image gauche" style="float:left;" />
<img src="imgG.gif" alt="image droite" style="float:right;" />
<div id="conteneur"></div>

</div>
</body>
</html>



#conteneurGen
{
padding:0;
background-color:#CCCCCC;
width:614px;
height:314px;
}

#conteneur
{
margin-left:24px;
background-color:#000000;
width:566px;
height:314px;
}


Après moults essais, je sèche complètement...Merci à qui pourra me proposer quelques pistes !
Une page de test c'est bien, mais une page de test valide c'est mieux !

Si tu n'utilises pas de déclaration de type de document (doctype) pour ta page, obtenir un comportement différent entre IE et les autres navigateurs n'a rien d'étonnant.
Commencer par s'occuper du modèle de boîte CSS serait une bonne chose.

Sinon, mis à part ce problème de place disponible, le bug vient sans doute du fait que les éléments de type bloc dotés de layout ne peuvent pas se « glisser » sous les flottants.
Le comportement normal des flottants fait qu'ils flottent par dessus les blocs, et ne repoussent que les éléments en-ligne (texte, images…). La marge appliquée au bloc central sert alors à le décaler de la largeur du flottant de gauche. Mais si le bloc central est doté de layout dans Internet Explorer, par exemple à cause d'une dimmension fixe, alors les flottants le repoussent également.

Comme tu auras forcément une dimmension fixe (on peut se passer de la largeur fixe, mais pour la hauteur, si tu en as besoin, ça serait compliqué de la virer), le conteneur central sera forcément doté de layout. Donc on va créer un contexte de formatage bloc pour obtenir un comportement similaire dans les navigateurs conformes, tout en supprimant la marge désormais inutile.
#conteneur {
	overflow: auto; /* crée le contexte de formatage */
	width: 566px;
	height: 314px;
	background-color: black;
}


Ça devrait faire l'affaire. Smiley smile
Modifié par mpop (22 Jul 2006 - 17:45)
Merci pour ta réponse très interressante.

En déclarant le DOCTYPE, cela fonctionne mieux effectivement. Du moins avec IE6, IE5.5 étant à l'ouest.

Je ne saisis pas très bien ce qu'est un layout et le contexte de formatage bloc. Si je mets overflow:auto, le problème ne se corrige pas, il y a toujours un espace autour des images rouges.

Je me demande s'il ne serait pas plus judicieux d'utiliser des <li> pour cette structure ? Et aussi si ça vaut kle coup de se préoccuper de la compatibilié avec IE5.5 ?

Smiley smile
Modérateur
Salut,


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


çà le fait non ?
Modifié par koala64 (23 Jul 2006 - 16:33)
bill_baroud a écrit :
Et aussi si ça vaut kle coup de se préoccuper de la compatibilié avec IE5.5 ?


salut !

ça dépend un peu de ton site, si c'est un site personnel ou un blog, ça ne sera pas vraiment problématique d'avoir un rendu bizarre sous IE 5 ... si c'est pour un site pro, ça fait moins sérieux. Si c'est pour un client et qu'il se rend compte que son site est tout pourri sur le PC de sa soeurette, il va peut-être pas apprécier. Tout dépend du contexte Smiley smile
Modérateur
oui, forcémment...

Je viens de voir que tu avais çà :

img
{
border:none;
padding:o;
margin:0;
}


Ce serait pas mal de mettre des 0 partout et non des none ou des o... Smiley cligne
Modérateur
Peux-tu mettre ta page en ligne parce que moi, je n'ai aucun soucis que ce soit sous Firefox ou IE...
Si les dimensions sont fixes, tu peux toujours positionner les images de gauche et de droite en absolute par rapport au conteneur ... si c'est uniquement décoratif, ça en devrait pas poser de problème de les sortir du flux et ça t'éviterait les petits soucis dont t'a parlé mpop ...

En tous cas, c'est une possibilité, si jamais tu ne t'en sortais pas.
Modérateur
Si ce n'est que décoratif, çà ne devrait surtout pas être dans le code html mais en background plutôt. Pour ce que je vois, une div suffit.
koala64 a écrit :
Si ce n'est que décoratif, çà ne devrait surtout pas être dans le code html mais en background plutôt. Pour ce que je vois, une div suffit.


c'est vrai, ça au fait ! A quoi elles servent, ces deux bandes rouges autour du cadre noir ?et qu'est-ce qu'il y aura dedans ?
a écrit :
Si ce n'est que décoratif, çà ne devrait surtout pas être dans le code html mais en background plutôt. Pour ce que je vois, une div suffit.


Le problème persiste en utilisant des <div> avec image en background. Comment fais-tu avec une seule div ? Je crois que je vais opter pour le positionnement absolu...
Modérateur
Cà signifie que tout ce qui se trouve dans le conteneur 'cont' aura des marges gauche et droite de 30px et des marges supérieure et inférieure de 0px. (ici le paragraphe)
Bonjour,

Pour ce qui est du problème de départ (images et float) : IE5.0 et 5.5 Windows créent une marge de 3px de part et d'autre de chaque image flottante.

IE6.0 reproduit tout à fait normalement ce comportement quand il est en mode de rendu Quirks (pas de DTD), c'est à dire quand il adopte le mode de rendu compatible avec ses anciennes versions. Par définition, on ne développe pas de nouveaux sites en mode quirks : il est là uniquement pour permettre aux anciennes mises en pages optimisées pour IE5 de "passer" dans IE6 et suivants.

Ce bug est une variante du three pixels jog. Comme ce dernier, il est inévitable et peut seulement être masqué : appliquer une marge négative aux images pour compenser (img {margin: 0 -3px}), en réservant ce style à IE5.x via une CSS en commentaires conditionnels (voir FAQ du forum).

Supprimer au passage les margin:0 et padding:0 appliqués aux images et aux div, qui ne peuvent avoir aucun effet quelque-soit la situation

Enfin, pour ce qui est de la question de "structure" : elle ne se pose pas, la page n'ayant pour l'instant aucun contenu à structurer. Définissez donc vos contenus avant de passer aux CSS...
Merci, tout ça est intéressant.


A propos de la structure, les images rouges représentent l'ombre du cadre du bloc qui contiendra de multiples blocs.

Le positionnenement absolu me semble plus adapté, en utilisant un div pour chaque ombre, plutôt qu'un seule image de fond représentant les 2 ombres.
bill_baroud a écrit :
A propos de la structure, les images rouges représentent l'ombre du cadre du bloc qui contiendra de multiples blocs.


Oui... De la présentation, donc. Pas de la structure.

Pour l'instant, ce n'est pas du (X)HTML que tu fais. C'est du dessin.

C'est tout à fait respectable. Mais... avec une petite tendance à générer toutes sortes d'erreurs au moment d'entrer les contenus réels dans le dessin Smiley cligne
Modérateur
bill_baroud a écrit :
A propos de la structure, les images rouges représentent l'ombre du cadre du bloc qui contiendra de multiples blocs.


Ben là, tu parles mise en page, pas structure... Structurellement parlant, il n'y a aucune raison pour rajouter deux conteneurs vides pour mettre des backgrounds, tout du moins en largeur fixe...

L'ombre est propre au bloc donc tu n'as pas de raison de la différencier. Je te conseillerais surtout de minimiser la multiplication des balises voire même de ne pas penser mise en page lorsque tu fais ton code html...

[EDIT]grillé... et pourtant je me sers de la prévisualisation ! Smiley ravi
Modifié par koala64 (23 Jul 2006 - 18:33)
Pages :
Sujet clos
Aller à