[XHTML] Problème d'affichage ie vs firefox2

Version imprimable

bonjour,

j'ai créé un tableau avec des bords arrondis, c.a.d. j'ai mis des images au 4 angles. Pas de problème dans ie mais dans firefox par contre j'ai décalage à l'affichage des images !!!

si quelqu'un à une idée, je l'en remercie d'avance,
Hervé.

Voici le code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<html>
	<head>
		<title>test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style>
                        .tableppal { width: 220px;}
                        .tableppal .top .left, .tableppal .top .right, .tableppal .bottom .left, .tableppal .bottom .right 
                        {width: 20px; height: 20px; }
                        .tableppal .top .left {background-position: top;background-image:url(/img/top_left_trait.png);background-repeat: no-repeat; }
                        .tableppal .top .right {background-position: top; background-image: url(/img/top_right_trait.png); background-repeat: no-repeat;}
                        .tableppal .bottom .left {background-position: bottom;background-image: url(/img/bottom_left_trait.png); background-repeat: no-repeat; }
                        .tableppal .bottom .right {background-position: bottom;background-image: url(/img/bottom_right_trait.png); background-repeat: no-repeat; }
                        .tableppal .bottom .center {width:180px;background-color:#f8f8ff}
                        .tableppal .top .center {width:180px;background-color:#f8f8ff}
                </style>
	</head>
 
	<body bgcolor="#ccff33">
		<div>
			<table border="0" cellspacing="0" cellpadding="0" class="tableppal" ID="Table1">
				<tr class="top">
					<td class="left">&nbsp;</td>
					<td class="center" style="border-top:1px solid #808080">&nbsp;</td>
					<td class="right" >&nbsp;</td>
				</tr>
				<tr bgcolor="#f8f8ff">
					<td colspan="3" style="border-left:1px solid #808080;border-right:1px solid #808080">&nbsp;</td>
				</tr>
				<tr class="bottom">
					<td  class="left">&nbsp;</td>
					<td class="center" style="border-bottom:1px solid #808080">&nbsp;</td>
					<td class="right" >&nbsp;</td>
				</tr>
			</table>
		</div>
	</body>
</html>

23/01/2007, 12h04
Bisûnûrs

Essaie de mettre un DOCTYPE à ta page, XHTML de préférence :

http://web.developpez.com/faq/html/?...#html_doctypes
23/01/2007, 17h31
rvux69

J'ai essayé avec plusieurs "DOCTYPE" mais le problème persiste..d'autres idées ?
23/01/2007, 18h08
MasterOfChakhaL

Salut,

Je te conseille fortement de conserver un doctype tout de même. Ca t'éviteras un certains nombre de galères...

Pour tes background-position, tu ferais mieux, je pense, de définir totalement la position.

Citation:

background-position: horizontal vertical;

horizontal peut prendre les valeurs: left, center ou right
vertical peut prendre les valeurs: top, center, bottom

Tu peux également indiquer des pixels ou des %

Vérifie aussi que tu n'as pas des marges définies dans tes td (les marges peuvent être présentes par défaut).
24/01/2007, 10h55
rvux69
J'ai rajouté
Code:

1 2 tableppal td { padding: 0px 0px 0px 0px; margin:0px 0px 0px 0px}
et en jouant sur les valeur de l'attribut "background-position" le problème résiste :cry: , merci pour votre aide :D

Dans firefox, il semble que mes images n'aient pas la même hauteur !!!! Par contre pour la largeur, c'est bon.
25/01/2007, 00h13
Mister Nono

Il y a border-radius pour faire des arrondis sans ajouter des images à chaque coins coins. :mouarf:

Bon je n'ai pas essayé avec le dernier IE boggué mais si les gens veulent du beau, ils n'ont qu'à adopter Firefox. :mrgreen:
25/01/2007, 10h32
rvux69

je développe pour un site grand public. "Border-radius" est du CSS 3.0, donc compatible avec peu de navigateurs !
25/01/2007, 12h05
Mister Nono

Citation:

Envoyé par rvux69

je développe pour un site grand public. "Border-radius" est du CSS 3.0, donc compatible avec peu de navigateurs !

C'est bien ce que je disais mais cela n'empêche pas d'implémenter cette solution. Tant pis pour les navigateurs qui ne l'acceptent pas. Il y en a marre de développez 2 fois un site web (1 pour Firefox et 1 pour IE). On ne va pas toujours supporter les aléas de IE. :aie:

Par contre en tant qu'informaticien je propose aux utilisateurs d'utiliser Firefox. :mrgreen:
25/01/2007, 12h15
Bisûnûrs

Citation:

Envoyé par Mister Nono

C'est bien ce que je disais mais cela n'empêche pas d'implémenter cette solution. Tant pis pour les navigateurs qui ne l'acceptent pas. Il y en a marre de développez 2 fois un site web (1 pour Firefox et 1 pour IE). On ne va pas toujours supporter les aléas de IE. :aie:

Même Firefox 2 n'intègre pas encore le CSS 3 ... Seule la propriété -moz-border-radius fonctionne pour l'instant pour Firefox.
Merci de ne pas dévier du sujet initial, ce n'est pas un débat IE / Firefox.
04/02/2007, 17h33
GregPeck

Je ne me suis pas penché sur ton problème mais voici un lien qui pourra peux être t'aider:

http://articles.e-t172.net/round/
04/02/2007, 23h39
spidermang

pour gagner un peu de poids

Je te conseille aussi l'adresse de mon prédécesseur.

J'ai eu aussi des soucis dans le calages de coins arrondis.
Pour ma part, j'ai utilisé un div avec une position relative dans lequel
tu places 4 span(ou autre, au choix) en position:absolute.
Afin de gagner du poids sur tes images, tu en crée une seule, c'est à dire un ronds.
que tu positionnes en background dans tes span qui auront eux memes les positions respectives : top 0 left 0, top 0 right 0, bottom 0 left 0, bottom 0 right 0
avec les memes tailles (puisque tu travailles avec un rond)
tu positionnes ton background respectivement en : top left, top right,bottom left et bottom right dans tes span.

normalement tu devrais avoir un resultat correct.

Par contre je sais que ie et FF réagissent différemment sur les positionnement en fonction du border de ton conteneur.

voila

J'espere t'avoir aidé.

Bye