18073 sujets

Questions générales et questions de débutants

[clos] Padding et margin

Comme chacun sait IE et Mozilla n'interprêtent pas de la même façon les dimensions des boites. D'où la difficulté d'utiliser les padding.

Raphaël Goetter suggère d'utiliser les margin sur les éléments à l'intérieur des boites par exemple les <h1>, <p>... à l'intérieur d'un div. Le pb c'est que lorsqu'on attribue une couleur de fond à un <div> et qu'on applique un margin sur une baslise contenue dans le <div> on décale la couleur de fond...

Exemple

HTML :

  <div id="references">
	      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis neque. Integer porta, nibh nec venenatis fermentum...
        </p>
  </div>


CSS :

#references {
	clear:right;	
	margin: 0 0 0 480px;;
	width: 300px;
	height:79px;
	background: #D5B793;
	padding: 0 0 0 1em;
	
}
#references p{
	margin: 1em 0 0 8em;
	padding: 0;
	color: #FFFFFF;
	text-indent: -8em 
	
}


J'avais cette solution qui fonctionne sur mozilla, Opera, IE6 et IE 5.5. Mais pas sur IE5.0 et IE4.0 :

#references {
	clear:right;	
	margin: 0 0 0 480px;;
	width: 300px;
	height:79px;
	background: #D5B793;
	padding: 0 0 0 1em;
	
}
#references p{
	margin: [b]0[/b] 0 0 8em;
	padding: [b]1em[/b] 0 0 0;
	color: #FFFFFF;
	text-indent: -8em 
	
}


La première tentation est de se dire, on se fout des vieilles version d'IE, sauf que quand vous êtes sur un projets de plusieurs milliers d'euros et que encore pas mal d'utilisateurs utilisent de vieilles versions de navigateurs, vous ne pouvez pas tenir ce langage (je pense surtout à des projets (intra/extranet).

Voyez-vous une solution à ce problème :
- Padding : mauvaise interprétation
- Margin : décalage du fond.

Merci pour vos solutions.

Jack.
Modifié par EricLB (02 Nov 2005 - 21:10)
Salut,

Ne pourrais-tu pas mettre en place un test de version de navigateur et peut-être chargé une présentation différentes pour ces "vieux" navigateurs ?

Ensuite d'après ce que je peux constater dans les sociétés aujourd'hui, il faut au minimum du 5.5sp2 avec un peu decryptage pour la partie sécurité. Donc dès que possible, le navigateur (microsoft) est upgradé.
S'il n'est pa possible à cause d'un OS trop vieux, alors on migre l'OS au minimum en Win2000.

Cela ne sert à rien de traîner des "boulets" car à un moment donné, cela crac et tu as encore plus d'embrouilles. Donc il faut dire stop.
C'est mon simple avis

JP
Bonjour,

Eviter les tests de discrimination des navigateurs côté serveur, problématiques et inutiles dans ce cas : utiliser simplement les commentaires conditionnels (voir la FAQ du forum) pour adresser à IE5.x Windows une CSS corrective qui adapte les valeurs de padding au box-model microsoft.

(Eviter également une autre tentation fréquente, qui consiste à basculer tous les navigateurs en mode de rendu Quirks pour qu'ils utilisent tous le modèle de boîte Microsoft).
Modifié par Laurent Denis (03 Sep 2005 - 08:16)
Donc pas de solution à ce problème si je comprends bien...

Je ne suis pas pour tester les différents navigateurs, ni pour les bidouilles, puisque CSS2 est là pour éviter ces bidouilles...
Bonsoir,

Dans l'une des bidouilles, car CSS2 est "là pour régler ces bidouilles" (provocation Smiley sweatdrop ) lues sur ce même forum, je crois me souvenir que IE déconnait lorsque l'accolade n'avait pas son petit espace…

a écrit :

#references p{
margin: 1em 0 0 8em;
…


En passant par là, juste en passant Smiley cligne

Pour le pb des paddings je ne sais pas si ca marche aussi avec IE5.0 mais en séparant le padding de la taille d'un bloc, ca marche. En divisant "sémantiquement" le bloc.

Exemple, pour :


#truc {
  width:300px;
  padding:0 25px;
}

<div id="truc">
</div>


essayer :


#trucPourIe {
  width:300px;
}

#truc {
  padding:0 25px;
}

<div id="trucPourIe">
  <div id="truc">
  
  </div>
</div>

Modifié par zzzazzz (05 Sep 2005 - 23:08)
Bonjour,
Y a t'il une objection à utiliser :
<head>
...
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style_ie.css" />
<![endif]-->
</head>

Avec une feuille de style spécifique à ie pour les "boites" ?
Sujet clos
Aller à