Margin top bug entre IE et Firefox

26 août 2009, 11:53

Bonjour à tous !

J'ai un petit problème d'affichage de contenu entre Firefox et IE.
Je m'explique, voici le code pour afficher les deux tableaux :

Code : Tout sélectionner

.CV1
{
	margin-top:-215px;
	margin-left:550px;
	font-size:11px;
}

.CV2
{
	margin-top: -94px;
	margin-left:550px;
	font-size:11px;
}

Code : Tout sélectionner

<table class="CV1" height=100>
	<tr>
	<td align=center width=260>
		<span style="font-size: 14px;">rolk24 (F 25 ans)</span>
	</td>
	</tr>
	<tr height=88 valign=middle>
	<td>
		Bonjour, originaire de dordogne, je me<br/>
		suis évadée quelques années pour mes<br/>
		études! Je viens de revenir dans la<br/>
		région et je cherche à faire des<br/>
		rencontres amicales en premier lieu et<br/>
		plus si affinité...
	</td>
	</tr>
</table>

<table class="CV2" height=100>
	<tr>
	<td align=center width=260>
		<span style="font-size: 14px;">zac360 (H 25 ans)</span>
	</td>
	</tr>
	<tr height=88 valign=middle>
	<td>
		cool et sympatique je cherche à faire des<br/>
		rencontres amicales et peut êtres une<br/>
		rencontre amoureuse si affinité. à<br/>
		bientôt j'espère avoir des contacts!. 
	</td>
	</tr>
</table>

Et enfin voici deux imprim' écran de ce que j'obtiens pour chaque navigateurs :

Firefox :

IE :

le fond (le cadre violet, etc.) c'est un background-image sur lequel j'ai fait pas mal de positionnement d'autre éléments (avec aussi des margin-top et margin-left).

Merci d'avance !

26 août 2009, 13:06

Bonjour,

le fond (le cadre violet, etc.) c'est un background-image sur lequel j'ai fait pas mal de positionnement d'autre éléments (avec aussi des margin-top et margin-left).

La réponse est très certainement là-dedans !

Donne directement le lien vers la page, c'est encore le mieux pour diagnostiquer

26 août 2009, 14:18

Pour l'instant je le fais en local avec Wampserver.

Voila mon fichier php et html :
http://dl.free.fr/troYFgI9X/dvp.zip

26 août 2009, 14:25

je pense plus que ton problème viennent de ca margin-top: -94px; !

je comprend pas ta manœuvre la ca te sert à quoi ?

Revois peut être la structure de ta page !
Genre un div avec un float:left pour ton formulaire, ue autre div avec un float:right dans laquelle tu met tes deux tableaux !

Code : Tout sélectionner

<div>
<div style="float:left;width:500px">ton formulaire</div>
<div style="float:right; width:200px"><table class="cv1"></table><table class="cv2"></table></div>
</div>

suis pas partisan de positionner les éléments avec les margins

26 août 2009, 15:00

Les margins je les aime bien parce qu'ils sont efficaces et ils marchent nickels sur IE et Firefox.

Finalement j'ai abandonné les tableaux pour des div :

Code : Tout sélectionner

<div id="CV1">
	<div id="pseudo1">
		<span class="pseudo_CV">rolk24 (F 25 ans)</span>
	</div>
	<div id="ContenuCV1">
	<td>
		Bonjour, originaire de dordogne, je me<br/>
		suis évadée quelques années pour mes<br/>
		études! Je viens de revenir dans la<br/>
		région et je cherche à faire des<br/>
		rencontres amicales en premier lieu et<br/>
		plus si affinité...
	</div>
</div>

<div id="CV2">
	<div id="pseudo2">
		<span class="pseudo_CV">zac360 (H 25 ans)</span>
	</div>
	<div id="ContenuCV2">
		cool et sympatique je cherche à faire des<br/>
		rencontres amicales et peut êtres une<br/>
		rencontre amoureuse si affinité. à<br/>
		bientôt j'espère avoir des contacts!. 
	</div>
</div>

et voici le code css qui va avec :

Code : Tout sélectionner

#CV1
{
	margin-top:-211px;
	margin-left:550px;
	height: 100px;
	width: 300px;
	font-size:11px;
}

#CV2
{
	margin-top: 22px;
	margin-left:550px;
	height: 100px;
	width: 300px;
	font-size:11px;
}

.pseudo_CV
{
	font-size:14px;
}

#pseudo1
{
	text-align:center;
	width:260px;
}

#ContenuCV1
{
	position: relative;
	top: 5px;
	height:88px;
	margin:auto;
}

#pseudo2
{
	text-align:center;
	width:260px;
}

#ContenuCV2
{	
	position: relative;
	top: 5px;
	height:88px;
	margin: auto;
	
}

ça marche beaucoup mieux ^^

26 août 2009, 15:14

S'il ne s'agit que de décaler un élément, le positionnement relatif suffit (position: relative).

Finalement j'ai abandonné les tableaux pour des div

Abandonner les tableaux de mise en forme, c'est bien ; encore faut-il ne pas sombrer dans la divite chronique.

Autrement dit, ton code gagnerait en sémantique si, par exemple, tu utilisais l'élément p pour le texte des annonces ; d'ailleurs, vu qu'on a affaire à une liste d'annonces, tu peux même utiliser une liste de définitions (élément dl), dans laquelle chaque pseudo figure dans un élément dt et chaque annonce dans un élément dd, comme suit :

Code : Tout sélectionner

<dl>
   <dt id="pseudo1" class="pseudo_CV">rolk24 (F 25 ans)</dt>
   <dd id="ContenuCV1">
      Bonjour, originaire de dordogne, je me<br/>
      suis évadée quelques années pour mes<br/>
      études! Je viens de revenir dans la<br/>
      région et je cherche à faire des<br/>
      rencontres amicales en premier lieu et<br/>
      plus si affinité...
   </dd>
   <dt id="pseudo2" class="pseudo_CV">zac360 (H 25 ans)</dt>
   <dd id="ContenuCV2">
      cool et sympatique je cherche à faire des<br/>
      rencontres amicales et peut êtres une<br/>
      rencontre amoureuse si affinité. à<br/>
      bientôt j'espère avoir des contacts!. 
   </dd>
</dl>

26 août 2009, 15:27

Abandonner les tableaux de mise en forme, c'est bien ; encore faut-il ne pas sombrer dans la divite chronique.

Intéressant cette article ! j'ai tendance à faire un peu tout en div ! merci pour ce lien Victor

26 août 2009, 15:30

Bien entendu, il ne s'agit pas d'interdire l'utilisation de l'élément div, mais de rappeler que div est un élément sémantiquement neutre (tout comme span, d'ailleurs).

26 août 2009, 16:19

Oui ! Merci Victor, je comprends mieux pourquoi ne pas empiler les <div> dans mon code HTML maintenant !

C'est vrai que c'est beaucoup plus clair et apparemment mieux pour le référencement alors ! ^^

26 août 2009, 16:23

C'est vrai que c'est beaucoup plus clair et apparemment mieux pour le référencement alors ! ^^

Et pas que pour le référencement.

Margin top bug entre IE et Firefox

Qui est en ligne