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

**rvux69** · 23/01/2007, 11h54

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

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

http://web.developpez.com/faq/html/?...#html_doctypes

**rvux69** · 23/01/2007, 17h31

J'ai essayé avec plusieurs "DOCTYPE" mais le problème persiste..d'autres idées ?

**MasterOfChakhaL** · 23/01/2007, 18h08

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.

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).

**rvux69** · 24/01/2007, 10h55

J'ai rajouté

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

, merci pour votre aide

Dans firefox, il semble que mes images n'aient pas la même hauteur !!!! Par contre pour la largeur, c'est bon.

**Mister Nono** · 25/01/2007, 00h13

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

Bon je n'ai pas essayé avec le dernier IE boggué mais si les gens veulent du beau, ils n'ont qu'à adopter Firefox.

**rvux69** · 25/01/2007, 10h32

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

**Mister Nono** · 25/01/2007, 12h05

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.

Par contre en tant qu'informaticien je propose aux utilisateurs d'utiliser Firefox.

**Bisûnûrs** · 25/01/2007, 12h15

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.

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.

**GregPeck** · 04/02/2007, 17h33

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/

**spidermang** · 04/02/2007, 23h39

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

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

HTML

Discussions similaires

Partager

Partager