Problème sous FF

Résolu
Ankhx Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   -  
Ankhx Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour, je suis un petit nouveau ici malgré que je parcours souvent ce petit forum, d'habitude j'arrive à regler mes problèmes aprés des heures de recherche et test mais la...je bloque :/

Pour faire un pti topo: site banal, j'ai fait moi même le design bref, jusque la tout va bien et donc dans mes petites création j'ai l'habitude dans la découpe de séparer ce qui est menu "naviguation" et menu "Login"(sur un script php prie avant que je modifie pour le design" pour être clair.
Je fait donc le codage a part de ces parties sur des pages que j'appel ensuite sur la principale pour ainsi dire, la étant pencher sur la partie "Login" je suis passer par le html + CSS (de base) mais en gardant la partie disposition/construction image dans la partie html, pour ce genre de partie j'utilise seulement le CSS pour les petits détails tel que police, font, marge, etc

Voila c'était juste la petite explication de ma façon de procéder même s'il y a beaucoup mieux je fonctionne ainsi.
Le problème arrive, pour le html j'utilise toujour smalgré moi les commandes obsolètes donc trés bien disposer sous IE et même si valider par W3C (html/CSS) sa n'en reste pas moins "peté" sous FF (et Opéra je présume).

donc je pense que c'est du à mon codage obsolète que je devrait mêtre à jour mais je ne sais pas du tout disposer le tableau que j'ai fait pour la Partie "Login" avec les balises <ul>, <li>, <ol>, etc du moins je n'y suis pas arrivé ^^

d'abord le lien test (à tester sous IE et FF pour voir le problème) : http://www.baka-att.fr/test/login/

Code Html:

<!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" xml:lang="fr"  lang="fr">

       <head>
                <title>Login</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <link rel="stylesheet" href="Login.css"/>
      </head>

<body>

<form method="post" action="login.php3">
  
<table cellpadding="0" cellspacing="0">
	<tr>
	
		<td colspan="5">
			<img src="images/02_03.jpg" width="216" height="10" alt=""></img></td>
	</tr>
	
	<tr>
		<td>
			<img src="images/02_05.jpg" width="63" height="18" alt=""></img></td>
		<td>
			<input type="text" id="image" name="pseudo_membre" /></td>
		<td>
			<img src="images/02_07.jpg" width="78" height="18" alt=""></img></td>
	</tr>
	<tr>
		<td>
			<img src="images/02_08.jpg" width="63" height="16" alt=""></img></td>
		<td>
			<input type="password" id="image-2" name="passe_membre"/></td>
		<td>
			<img src="images/02_10.jpg" width="78" height="16" alt=""></img></td>
	</tr>
	<tr>
		<td colspan="5">
			<img src="images/02_11.jpg" width="216" height="8" alt=""></img></td>
	</tr>
</table>	

<table cellpadding="0" cellspacing="0">

<tr>
		<td rowspan="3">
			<img src="images/02_12.jpg" width="25" height="29" alt=""></img></td>
		<td colspan="3">
			<img src="images/02_13.jpg" width="81" height="6" alt=""></img></td>
		<td rowspan="3">
			<img src="images/02_14.jpg" width="10" height="29" alt=""></img></td>
		<td colspan="3">
			<img src="images/02_15.jpg" width="81" height="6" alt=""></img></td>
		<td rowspan="3">
			<img src="images/02_16.jpg" width="19" height="29" alt=""></img></td>
	</tr>
	<tr>
		<td colspan="3">
			<input class="connexion" type="submit" name="Submit" value=""/></td>
		<td colspan="3">
			<a href="adduser.php3"><img src="images/02_18.jpg" width="81" height="18" style="border-width:0" alt=""/></a></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/02_19.jpg" width="81" height="5" alt=""></img></td>
		<td colspan="3">
			<img src="images/02_20.jpg" width="81" height="5" alt=""></img></td>
	</tr>
	
</table>
</form>


</body>
</html>




Page CSS :

input {
border: 0;
background: transparent;

}

#image { 
background-image:url(images/02_06.jpg);
background-position: top;
height: 14px; 
width: 73px; 
text-align: center; 
font-size: 10px;
        } 

#image-2 { 
background-image:url(images/02_09.jpg); 
background-position: top;
height: 12px; 
width: 73px; 
font-size: 10px; 
text-align: center; 
         }

.connexion { 
background-image:url(images/02_17.jpg); 
width: 81px; 
height: 18px; 
           } 
		   




Voila si vous avez 2min pour m'aider, merci d'avance ! Si vous avez des questions hésitez pas !

8 réponses

Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
salut,

si on a une version en ligne, le code est inutile.
et après tout ce baratin on ne sait toujours pas quel est ton problème.
0
Ankhx Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   1
 
Juste à la fin de mon baratin je dit mon problème ^^ et au niveau du lien

aprés beaucoup de recherche j'ai trouver que des sujets traitant sur des problemes avec le navigateur IE mais moi mon problème et sous firefox, c'est la que tout est démanteler dans mon design. donc j'aimerais savoir si c'est parsque j'utilise pas les bonnes balises (html)
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
oui c'est bien ce que je dis tu ne décris pas ton problème donc pour savoir il faut ouvrir ton site et en plus dans deux navigateurs différents, sympa !
en plus ça tombe bien y a que ta question à lire et on a tout notre temps !

tu as sans doute un problème de marge ou d'espacement (margin et/ou padding).
les différences viennent des valeurs par défaut qui ne sont pas toujours les mêmes d'un navigateur à l'autre.
comme tu utilises des tableaux il peux y avoir d'autre règles concernées (border-collapse et/ou border-spacing).

pour y remédier tu peux essayer de remettre à zéro toutes les propriétés pour les balises concernées.
table, thead, tbody, tfoot, th, tr, td{
	margin:0;
	padding:0;
	border-collapse:0;
	border-spacing:0;
}


quand à utiliser n'importe quelle balise, le principale inconvénient pour toi est que tu te compliques la vie.
pour le visiteur c'est une plus grande chance d'avoir des différences d'affichage si il n'utilise pas le même navigateur que toi et surtout ça rend ton site non accessible.
0
Ankhx Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   1
 
Dire que j'avais essaiyer d'etre clair étant nouveau ^^ je le saurais pour la prochaine fois :p

Pour t'a solution, j'ai bien rajouter ça dans ma feuille de style mais sa reste inchangé.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
il y a aussi <input> et <img/>
table, thead, tbody, tfoot, th, tr, td, input, img{
	margin:0;
	padding:0;
	border-collapse:0;
	border-spacing:0;
        border-style:none;
}
input{
       line-height:100%;
}

si ça ne fonctionne pas, pour confirmer ou infirmer mon hypothèse ajoute le CSS reset d'Éric Meyer (ajoute le comme une deuxième feuille de style).
0
Ankhx Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   1
 
Rien n'y fait, j'ai fait les deux trucs

pour l'autre feuille de style je l'ai nommé reset si tu veut regarder à partir du lien
0
Dalida Messages postés 6728 Date d'inscription   Statut Contributeur Dernière intervention   922
 
tu peux aussi essayer d'ajouter cet attribut à la table :
cellspacing="0"

sinon, tu es toujours pas tenté par du code un peu plus propre ?
0
Ankhx Messages postés 11 Date d'inscription   Statut Membre Dernière intervention   1
 
ok je vais tester ça

Si si un code plus propre m'arrangerais aussi mais je le connais pas assé pour me lancer dedans encore sans bourré la pages de fautes ^^
0