Margin top bug entre IE et Firefox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Margin top bug entre IE et Firefox

ozone--24

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 :

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

Code :

<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 !

Publicité

pataluc

salut,

il n'y a aucune raison d'utiliser des tableaux pour ce type de comportement... si tu as une image fixe derrière, je te conseille d'utiliser des div en position:absolute par exemple...

abais

Tiens c'est marrant, Firefox empêche le chevauchement des tableau (ce qui serait normal remarque)...
Sinon, utiliser des tableaux pour ton utilisation n'a rien de bon... Donc, +1 pour les DIV...(mais en position relative vue qu'il s'agit d'un élément en desous l'autre), et d'integrer les bg-image au bon élement...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

ozone--24

En fait j'avais utiliser des tableau pour centrer le titre des deux petits encarts au milieu
ET pour centrer verticalement le contenu des deux cadre, ça serait trop compliqué (mais faisable) de centrer le contenu avec des div non ?

abais

C'est beaucoup plus adéquat de le faire en div... ça sera peut-etre plus compliqué dans le sens ou tu t'es habitué au table, mais tu veras que le principe des div est plus "logique"... je vais te faire un exemple quand j'aurais 10 sec...
Sinon, pour centrer le texte DANS une div (horizontalement) c'est le CSS "text-align : center;"... pour centrer une div horizontalement dans son conteneur, c'est "margin : auto;"
Pour le centrage verticale, c'est un autre problèmes, les solution sont diverses, mais je ne te montrerais pas.. je te ferais un exemple ou le cadre du texte sera extensible et s'adaptera verticalement au contenu...

Message édité par abais le 26-08-2009 à 14:33:21

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

ozone--24

Ouais, t'as raison, en fait j'ai utilisé un tableau parce que j'ai repris le code d'un collègue qui ne jure que par les <table>, du coup j'ai continué dans la lancé. Mais pour tout le reste de mon code, je n'utilise que des div ou des span avec des margin: auto; ou des margin-top et margin-left...
Mais je crois que je vais re-taper mon code en div et span c'est bien plus efficaces et compatible avec tous les différents types de navigateurs !

abais

Tiens : regarde ça : (je n'ai pas verifier sur tous les browser) :

>>> Lien <<<

Les images :

La source :

HTML :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test div Ozone24</title>
 
</head>
 
<body>
<div class="message">
    
  <div class="auteur">
            rolk24 (F 25 ans)
  </div>
        
        <div class="texte">
            Ceci est un message de plusieurs ligne, ce qui devrait agrandir verticalement son conteneur...
        </div>
        
    </div>
    
    <div class="message">
    
        <div class="auteur">
            zac360 (H 25 ans)
        </div>
        
        <div class="texte">
            blablab blabla blababla bla blabla bla blab blabla blablabla bla blabla blablab blabla bla blabla bla ab blabla blablabla bla blabla blablab blabla bla blabla bla ab blabla blablabla bla blabla blablab blabla bla blabla bla blabla blablab blabla blablabla bla blabla blablab blab la blabl abla bla blab blabla blablabla bla blabla blablab blabla bla blabl
        </div>
        
    </div>
    
    <div class="message">
    
        <div class="auteur">
            rolk24 (F 25 ans)
        </div>
        
        <div class="texte">
            cool et sympatique je cherche à faire des rencontres amicales et peut êtres une rencontre amoureuse si affinité. à bientôt j'espère avoir des contacts!.
        </div>
        
    </div>
 
</body>
</html>

CSS:

Code :

body {
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.message{
position:relative;
background:url(images/testDiv_bg.png);
width:250px;
margin:15px auto 15px auto;
}
.auteur{
position:relative;
padding-top:3px;
width:250px;
height:58px;
text-align:center;
font-size:14px;
background:url(images/testDiv_haut.png);
}
.texte{
position:relative;
margin-top:-25px;
padding:5px 20px 10px 20px;
text-indent:20px;
min-height:36px;
font-size:10px;
text-align:justify;
background:url(images/testDiv_bas.png) no-repeat bottom;
}

Message édité par abais le 26-08-2009 à 16:10:04

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

ozone--24

Merci beaucoup abais !!
Je me demandais comment faisait les webmasters, en fait c'est simple !

J'aurais une autre question aussi, en fait je voudrais rajouter des photos dans mes cadres en haut de la page :

Mais vu que j'ai placé tout mes éléments avec des margin et que les photos ne sont pas entre eux de la même hauteur et longueur, il y'a un problème quand je veux les placer dans les cadres, ça chamboule tout.
J'ai essayé avec les position absolute, mais si on zoome avec le navigateur (ctrl+"+" ou ctrl+"molette de la souris" ) ça bug complètement, ça me met les images un peu partout hors des cadres, un peu n'importe comment.

Il y'aurait pas une solution pour placer correctement les images dans des cadres ?

Message cité 1 fois

gatsu35

Blablaté par Harko

ozone--24 a écrit :

Merci beaucoup abais !!
Je me demandais comment faisait les webmasters, en fait c'est simple !

J'aurais une autre question aussi, en fait je voudrais rajouter des photos dans mes cadres en haut de la page :

http://i81.servimg.com/u/f81/11/31/25/01/cadrag10.jpg

Mais vu que j'ai placé tout mes éléments avec des margin et que les photos ne sont pas entre eux de la même hauteur et longueur, il y'a un problème quand je veux les placer dans les cadres, ça chamboule tout.
J'ai essayé avec les position absolute, mais si on zoome avec le navigateur (ctrl+"+" ou ctrl+"molette de la souris" ) ça bug complètement, ça me met les images un peu partout hors des cadres, un peu n'importe comment.

Il y'aurait pas une solution pour placer correctement les images dans des cadres ?

dis toi juste dans ta tête que à partir du moment ou tu es obligé de bricolé et donc te taper des margin-top négatifs et devoir recaler des trucs aussi mochement (margins negatifs, position relatifs et absolute avec des tops dans tous les sens) ça signifie que c'est mal codé et que tu dois repartir proprement

---------------
Blablaté par Harko

abais

Tu te lance dans l'entreprise d'un site de rencontre avec de très faible notion en prog web ou n'ai-je rien compris ???

Il faut une solidarité logique entre les photos et leurs cadre...
Le Webdesign, ce n'est pas une image et une synchronisation de position des éléments dynamique par une superposition + que bordélique...

Je te conseil d'apprendre les bases du web avant d'entreprendre ce projet...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

Publicité

ozone--24

T'es bien méchant avec moi ^^
Le projet est quasiment fini, c'est une petite boîte, t'inquiètes pas pour ça ;-)

Je voudrais juste de l'aide pour cette partie là, après j'aurais fini

Tu n'aurais pas une idée Abais ?

abais

bas, une div avec limage du cadre en background...
Tu met ta photo <img> dans cette div (qui contien un padding de manière à caler le contenu à l'image de fond).
Sinon, je ne suis pas méchant, je t'ai même consacré 15 min aujourd'hui, j'ai juste peur que ça ne serve pas autant que je le pensais, parceque mon altruisme a ses limites... Je ne pensais pas que tu n'avais pas ces notions...

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

FORUM HardWare.fr

Programmation

HTML/CSS

Margin top bug entre IE et Firefox

Sujets relatifs
[Résolu] CSS lien en block absolu sur IE	AJAX : problème de compatibilité IE / Firefox
Code jvs qui fonctionne sous IE 6 et 7 mais pas 8 et Google Chrome	[ajax] Mon readyState ne dépasse pas 1 avec IE
StopPropagation - Firefox and more	Redirection ok sur IE et pas sur Firefox
problème de positionnement entre IE et FireFox ...
Plus de sujets relatifs à : Margin top bug entre IE et Firefox

Page générée en 0.081 secondes