Table BackGround IE vs FF

26 janv. 2006, 18:38

Hello a tous,
Et oui, me revoila avec un ennui de plus, désolé

Je m'explique :
J'ai denouveau un affichage different dans IE et dans FF avec une table.
Mais je ne sais pas d'ou cela vient.
Voici le HTML:

<html>
<title>Seb - Contact Page - Copyright &copy; 2006</title>
<head>
</head>
<!-- Début -->
<style TYPE="text/css">
body{
background-color:#808080;
color:#FFFFFF;
}
table {
background-repeat: no-repeat;
background-position: center left;
}
</style>
<!-- Fin -->
  <body>
	<table border="0" valign="center" height="100%" width="100%"><tr><td>
		<table border="0" align="center">
		<tr>
			<td>
				<table border="0">
					<tr><td>
						<p><img src="logoseb.jpg" height="160" width="200" alt="Copyright &copy; 2006"></p>
					</td></tr>
					<tr><td>
						<p><img src="contactseb.jpg" height="160" width="200" alt="Copyright &copy; 2006"></p>
					</td></tr>
				</table>
			</td>
			<td background="fondeau.jpg" height="320" width="400">
				<p><?php include ('formulaireseb.php'); ?></p>
			</td>
		</tr>
		</table>
	</td></tr></table>
  </body>
</html>

visible sur http://membres.lycos.fr/nonameyet/
Avec IE, affichage nickel, mais FF me pose probleme, il m'agrandi le fond de ma table :S
Y a til un truc que j'ai mal fait ?
MErci d'avance

voila les screen IE et puis FF :

26 janv. 2006, 18:56

As-tu songé à une mise en page sans tableaux HTML ?

26 janv. 2006, 20:17

J'y ai pensé mais je veux un alignement vertical pour IE et FF, bref....
Et puis je me suis lancer dans les Table et pas les DIV mais s'il faut je changerai....
Sinon tu ne sais pas d'ou vient l'erreur ?

26 janv. 2006, 21:10

probablement d'une marge interne du tableau contenant le formulaire additionné à une marge externe du formulaire lui-même. Tout ça peut s'ajuster via le style CSS.

J'ajoute que CSS ne signifie pas obligatoiremet DIV : on va en utiliser pour certains éléments c'est vrai, mais pas systématiquement : on utilise les propriété des éléments de bloc : titres, paragraphes etc... tout ça peut être positionné correctement sans utiliser les tableaux.

Si tu veux voir un exemple de mise en page assez complexe sans le moindre tableau, jete un oeil ICI et un encore plus spectaculaire et très connu des webdsigners : csszengarden

26 janv. 2006, 22:37

Pourtant j'ai mis background no repeat pour les tables....
Bon faut que je revois le tout via CSS alors

26 janv. 2006, 22:45

Le problème ne viens pas du background mais des marges intérieures et extérieures de certains objets de la page.

26 janv. 2006, 23:21

Bon j'ai tout refais en CSS, et effectivement il y avait aussi un souci avec le formulaire inclus.
MAis bon, j'y ai perdu le "centrage automatique".

<html>
<title>Seb - Contact Page - Copyright &copy; 2006</title>
<head>
</head>
<!-- Début -->
<style TYPE="text/css">
html,body{
margin:0;
padding:0;
background-color:#808080;
color:#FFFFFF;
size:0.8em;
}
#form {
position: absolute;
margin-left: 350px;
margin-top: 100px;
height:320px;
width:400px;
background-image:url('fondeau.jpg');
background-repeat: no-repeat;
background-position: center center;
}
#logos {
position: absolute;
margin-top: 100px;
left:100px;
width: 200px;
height:320px;
}
</style>
<!-- Fin -->
  <body>
		<div id="logos">
			<img src="logoseb.jpg" height="160" width="200" alt="Copyright &copy; 2006">
			<img src="contactseb.jpg" height="160" width="200" alt="Copyright &copy; 2006">
		</div>
		
		<div id="form">
			<?php include ('formulaireseb.php'); ?>
		</div>
  </body>
</html>

Et j'ai encore une légère différence entre IE et FF

26 janv. 2006, 23:40

On va arranger ça, mais c'est effectivement nettement mieux

<html>
<title>Seb - Contact Page - Copyright © 2006</title>
<head>
</head>
<!-- Début -->
<style TYPE="text/css">
html,body{
    margin:0;
    padding:0;
    background-color:#808080;
    color:#FFFFFF;
    size:0.8em;
}
#page {
    position: absolute;
    top: 0;
    width: 600px;
    left: 50%;
    margin-left: -300px;
}
#logos {
    position: relative;
    margin-top: 100px;
    left:0;
    width: 200px;
    height:320px;
    float: left
}
#form {
    position: relative;
    margin-left: 200px;
    margin-top: 100px;
    height:320px;
    width:400px;
    background-image:url('fondeau.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}
</style>
<!-- Fin -->
  <body>
  <div id="page">
        <div id="logos">
            <img src="logoseb.jpg" height="160" width="200" alt="Copyright © 2006">
            <img src="contactseb.jpg" height="160" width="200" alt="Copyright © 2006">
        </div>
        <div id="form">
            <?php include ('formulaireseb.php'); ?>
        </div>
      </div>
  </body>
</html>

Regarde les changements : centrage automatique aussi, mais j'ai utilisé une astuce : j'ai ajouté un div quand même, mais c'est tout de même largement moins lourd que les tableaux pour le même résultat. Essaye avec ça et reviens pour qu'on ajuste les histoires de background. Si tu as la page en ligne quelque part, ce sera encore plus facile pour voir de quoi il retourne.

26 janv. 2006, 23:45

Avec FF pas de probleme, par contre IE :S

résultat de ta page : http://membres.lycos.fr/nonameyet/index2.php
ma page actuelle : http://membres.lycos.fr/nonameyet/index.php

27 janv. 2006, 21:51

Mon probleme est resolu , merci a toi et puis aussi a MereTheresa et son magnifique post-it

PS : voila pour faire le centrage Vertical

=> http://www.intensivstation.ch/files/en_ ... emp11.html

Table BackGround IE vs FF

Qui est en ligne