28173 sujets

CSS et mise en forme, CSS3

Bonsoir,

Je rencontre un problème difficilement compréhensible :
j'ai un padding de 5px dans une table qui apparait sous firefox mais pas sous IE7.

Après de nombreuses recherches j'ai bien vu quelques tutos sur la bidouille des boites pour IE comme celui de Openweb.eu.org sur les modèles de boite CSS.

Je n'arrive pas à résoudre mon pb par cette méthode.
Voici mon code, si qqn avait la gentillesse d'y jeter un oeil...

Je vous joins deux captures d'écran peut etre plus explicite et le bout de code.

Merci !!

upload/7679-firefox.gif upload/7679-ie7.gif


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Sommaire</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*	{
	margin: 0;
	padding: 0;
}
html	{
	background: url(images/fondpage.jpg) repeat-x;
}
#global	{
	width: 800px;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	padding: 5px;
}
#header	{
	background: url(images/header_fond.jpg) repeat-x;
	height: 100px;
}
</style>
</head>

<body>
<table id="global" cellspacing="0" cellpadding="0" border="0">
<!-- HEADER / start -->
	<tr id="header">
		<td>&nbsp;</td>
	</tr>
</table>
</body>
</html>

Modifié par besse (20 Jul 2006 - 02:43)
Pour ceux qui ont éventuellement déjà rencontré ce pb, j'ai trouvé une solution qui semble fonctionner :

j'entoure ma table par une DIV, et j'applique un padding à la DIV Smiley smile Smiley smile et là miracle, ça marche avec IE !!!

Merci.
Oui, c'est logique, IE et les autres n'ayant pas le même modèle de boite comme tu as pu le lire sur openweb.

Un modèle ajoute le padding au width, l'autre non.

Par précaution, il est bon de ne pas appliquer de padding à un élément dimensionné Smiley smile Solution que tu as trouvé tout seul en englobant ton élément d'un conteneur Smiley cligne

Par contre, ne te fie pas trop à IE7, ça n'est encore qu'une beta susceptible de changer du tout au tout (peut être pas à ce point, mais ce n'est pas une base fiable de tests, une idée de ce que ça pourrait donner tout au plus).
++
merci de ta réponse, et j'en prends note.

Je vais repasser à l'ancienne version de IE, surement plus représentatif du parc informatique !! Smiley confus

A+
besse a écrit :
merci de ta réponse, et j'en prends note.

Je vais repasser à l'ancienne version de IE, surement plus représentatif du parc informatique !! Smiley confus

A+


Tu peux conserver une version d'IE7 pour tester quand même le rendu (il doit exister une version standalone (pas forcément officielle m'enfin...), je te prévenais juste des risques encourus Smiley cligne mais rien ne t'empêche de tester sur plusieurs version d'IE Smiley smile mais se baser sur IE 6 est plus sûr !

Au cas où tu ne procède pas de cette manière, je te l'indique en passant :
il est conseillé de developper et de se baser sur un navigateur le plus conforme possible (Opera pour les CSS, firefox reste plutôt pas mal Smiley cligne ) pour avoir le comportement (a priori) attendu et donc appliquer les méthodes (toujours a priori) les plus efficaces.
Quitte à ensuite corriger les éventuels problèmes qui pourraient survenir sous IE. (les autres navigateurs ne sont pas à négliger non plus Smiley cligne )

Voilà Smiley smile
Modifié par Olivier (20 Jul 2006 - 03:02)
Bonjour,

Juste une remarque (qui ne change rien à la solution) : IE Win n'applique pas de padding aux éléments <table>, mais c'est un problème totalement distinct du box-model (IE6 et 7 ayant un box-model standard en mode de rendu strict).
Laurent Denis a écrit :
Bonjour,

Juste une remarque (qui ne change rien à la solution) : IE Win n'applique pas de padding aux éléments <table>, mais c'est un problème totalement distinct du box-model (IE6 et 7 ayant un box-model standard en mode de rendu strict).


Ahh woki, je savais pas ça Smiley smile
Est il question un jour ou l'autre d'une harmonisation des naviguateurs ???
Pour les noobs comme moi, il y a déjà assez de problèmes à créer des belles pages sans pour autant devoir tester toutes les 5 sec sur 4 naviguateurs différents !!!! Smiley fache Smiley fache
Bonjour,

Par ailleurs le calcul de largeur n'est il pas différent concernant les tables, à savoir qu'il comprend le padding et les bordures comme dans le modèle de boîte traditionnel (tout en devant tenir compte de la largeur minimal nécessaire à son contenu).