[RESOLU] Différences gestion CSS IE / Firefox : AAAAAAAAh !

Question

wasted

25 Jan 2008 à 10:13

Oui, je sais le titre est pas forcément du mieux qui soit, mais ça résume pas mal mon état actuel Smiley smile

.

Pour résumer, je suis en train mettre en place un petit site pour un ami ; il a fait appel à un graphiste pour l'aspect design, et ce dernier m'a livré des psd bruts ... charge à moi de les découper/adapter pour en faire un site.

Vu que c'est dans l'urgence (comme d'hab), j'ai fait au plus simple (a priori) ; sauf que là, ça ressemble à quelque chose sous FF, mais à rien sous IE !

J'ai donc besoin de vous pour m'expliquer ce qui ne va pas, parce que j'ai essayé pleins de choses différentes, et j'arrive jamais à avoir un résultat identique sous les deux browsers.

Les pages en question:
1/ http://www.lautopaloise.fr/construction/construction.html
2/ http://www.lautopaloise.fr/construction/construct_form_SA.html

Pour le 1/ : j'ai fait ça avec une réso de 1280*1024 ; à cette réso c'est nickel, sauf que quand je change, c'est plus bon (je suppose que c'est un problème de position, mais je ne sais pas comme gérer l'affichage du texte sur le panneau gris, pour que ça y reste en permanence, quelque soit la résolution et le navigateur ...

Pour le 2/ : sous IE, ça se décale vers la droite ...

Merci d'avance pour votre aide !!!
Modifié par wasted (25 Jan 2008 - 15:07)

Chum

25 Jan 2008 à 10:18

Hello !

Bon déjà de un si on clique sur ton 2ème lien ca donne:
"Le fichier spécifié est introuvable."

Et de deux:
Comment veux tu que l'on trouve une solution a ton problème sans le moindre code ...
même pas un début de ciblage du problème... tu as essayer de faire ton site a blanc (Sans image et autre pour voir si ca fonctionne ? )

à vous les studios

Chum
Modifié par Chum (25 Jan 2008 - 10:20)

wasted

25 Jan 2008 à 10:24

Chum a écrit :
Bon déjà de un si on clique sur ton 2ème lien ca donne:
"Le fichier spécifié est introuvable."

Mea Culpa, j'avais mal modifié mon copié/collé, c'est réparé.

Chum a écrit :
Et de deux:
Comment veux tu que l'on trouve une solution a ton problème sans le moindre code ...

Bah, suffit de faire un clic droit => voir le code source pour voir le code ... en fait il me semblait justement que ça éviterait de faire un message à rallonge ... mais si vous préférez avoir le code direct dans le message je peux le faire !

Chum a écrit :
même pas un début de ciblage du problème... tu as essayer de faire ton site a blanc (Sans image et autre pour voir si ca fonctionne ? )

hmmmm j'avoue que non, mais je ne vois pas trop ce que ça changerait ... tu peux m'expliquer comment tu vois les choses ?

EDIT : bon ben voilà mon bout de code avec le problème que j'ai:

pour ce qui est du 2/


<div id="top_form"></div>
<div id="cadre_form">
	<div id="cadre_form_in">
		<br /><br />
		<table style="text-align: left; width: 100%;" border="0">
			  -- tableau formulaire --
		</table>
	</div>
</div>

le css associé:

#top_form{
	background-image:url(img/construct_top.png);
	background-repeat:no-repeat;
	width:855px;
	height:171px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
	top:0px;
}
#cadre_form{
	margin-top:150px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(img/cadre_form.png);
	background-repeat:no-repeat;
	width:679px;
	height:301px;
	color:#fff;
}
#cadre_form_in{
	width:490px;
	height:290px;
	font:bold 9px verdana;
}

Et donc mon soucis : sous FF tout va bien, mais sous IE, toute la partie tableau est décalée vers la droite ... (j'ai bien tenté un margin-left : -50px dans cadre_form_in mais du coup c'est sous ff que ça va plus ...).
Modifié par wasted (25 Jan 2008 - 10:40)

Chum

25 Jan 2008 à 10:38

Tu fais un teste avec des div de couleur et tu regarde lequel a des soucis de placement.

Et si pas de résultat: tu efface des partie de ton code(le vrai, pas le teste que tu viens de créer) jusqu'à ce que tu voie ton problème se corriger.

et la normalement tu verras surement une partie qui gène...

Du fait que tu travail avec des css il y a toujours des mauvaise interprétation du code par IE... donc utilise les hack !
dans le forum alsacration --> lien
sinon je te laisse chercher sur google il y a tout plein de forum qui te donne des hack ! (je peux pas mettre les lien car c'est des concurrent de alsacreation... enfin je sais pas trop si c'est des concurrent mais bon je ne veux pas m'avancer)

donc la marche a suivre:
1- chercher l'erreur (ou le bout de code qui gène)
2- faire une recherche sur le forum pour voir si tu n'es pas le seul qui a eu ce problème
3- corriger ton problème

Si ça ne résout pas ton problème:
met déjà ce que tu as trouvé comme bout de code qui gène.

Chum

Igor

25 Jan 2008 à 10:47

Chum a écrit :
Du fait que tu travail avec des css il y a toujours des mauvaise interprétation du code par IE... donc utilise les hack !

Non. Des commentaires conditionnels au besoin.

wasted

25 Jan 2008 à 11:03

Merci de vos conseils (notamment Chum) : je teste ça et je reviens si je trouve pas mon problème tout seul Smiley smile

wasted

25 Jan 2008 à 11:49

on ben je reviens Smiley smile

Alors j'ai suivi tes conseils Chum, et voici ce que j'obtiens:
http://www.lautopaloise.fr/construction/test/

Le code de la page:

<!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">
<head>
<title>lautopaloise.fr</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="page">
	<div id="top_form"></div>
	<div id="texte_pres"></div>
	<div id="cadre_form">
		<div id="cadre_form_in">

		</div>
	</div>
	<div id="footer"></div>
	<br /><br />
</div>
</body>
</html>

Le CSS:

html, body {
	color:#ffffff;
	font-family:verdana;
	font-size:14px;
	font-size-adjust:none;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	line-height:normal;
	margin-top:0px;
	height:100%;
}
#page {
	margin-left:auto;
	margin-right:auto;
	width:860px;
	min-height:100%;
	background-color:#000;
}
#top_form{
	/**background-image:url(img/construct_top.png);
	background-repeat:no-repeat;**/
	background-color:#fff;
	width:855px;
	height:171px;
	margin-left:auto;
	margin-right:auto;
	top:0px;
}
#texte_pres{
	background-color:#fe00bf;
	width:700px;
	height:100px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
}
#cadre_form{
	/**background-image:url(img/cadre_form.png);
	background-repeat:no-repeat;**/
	background-color:#fff;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	width:679px;
	height:301px;
	color:#fff;
}
#cadre_form_in{
	margin-left:10px;
	margin-right:10px;
	margin-top:20px;
	width:490px;
	height:281px;
	font:bold 9px verdana;
	background-color: #ffff00;
}
#cadre_form_in INPUT {
    color:#000000;
    background-color:#ffffff;
	font:bold 9px arial;
	border: 0px;
	width:150px;
}
#cadre_form_in textarea {
    color:#000000;
    background-color:#ffffff;
	font:bold 9px arial;
	border: 0px;
	width:300px;
}
#footer{
	background-color:#fe00bf;
	width:700px;
	height:50px;
	margin-left:auto;
	margin-right:auto;
	margin-top:65px;
}

Et mon problème : j'aimerais que le cadre jaune ait une marge de 10px à gauche, en haut et en bas, pas rapport au cadre blanc ... pour la gauche, ça roule, mais pour le haut/bas, j'ai 0/20px sous FF et 20/0px sous IE !!

Une idée ?

Chum

25 Jan 2008 à 12:00

#cadre_form_in{

	margin-left:10px;

	margin-right:10px;

	margin-top:20px;

	width:490px;

	height:281px;

	font:bold 9px verdana;

	background-color: #ffff00;

}

margin-top:10px;
margin-bottom:10px;

en meme temps si tu as partout 10px de margin... met uniquement (et une fois)
margin:10px;

Bonne ap Smiley lol

wasted

25 Jan 2008 à 12:07

hmmm, comme elle me prend pour une chèvre la chum ! Smiley lol

Bon sinon, j'avais bien évidemment testé, et ça marche pas !

Ceci dit, j'ai trouvé une autre méthode (ou peut-être LA méthode ...): j'ai passé mes blocs en position: relative; et mis des top: xxpx; et ça passe ...

Bon ap' Smiley cligne

zzzazzz

25 Jan 2008 à 13:11

Chum a écrit :
hack ! (je peux pas mettre les lien car c'est des concurrent de alsacreation... enfin je sais pas trop si c'est des concurrent mais bon je ne veux pas m'avancer)

C'est pas une histoire de concurrence, je ne pense pas qu'AlsacréationS censure un post si tu oses mettre le nom d'un "concurrent" (bizarre ce terme sur un tel forum, d'ailleurs). Par contre ce qui gêne une bonne partie des membres du forum, c'est le mot "hack", qui n'est comme le suggère Igor pas la première chose à faire. mais vraiment l'ultime recours lors que toutes les solutions ont été tentées (perso, je préfère changer de méthode que d'utiliser un hack).
Bon courage
Modifié par zzzazzz (25 Jan 2008 - 13:13)

Chum

25 Jan 2008 à 13:17

zzzazzz a écrit :

C'est pas une histoire de concurrence, je ne pense pas qu'AlsacréationS censure un post si tu oses mettre le nom d'un "concurrent" (bizarre ce terme sur un tel forum, d'ailleurs). Par contre ce qui gêne une bonne partie des membres du forum, c'est le mot "hack", qui n'est comme le suggère Igor pas la première chose à faire. mais vraiment l'ultime recours lors que toutes les solutions ont été tentées (perso, je préfère changer de méthode que d'utiliser un hack).
Bon courage

En fait je suis un peut radical moi... un gros défaut je sais ... vive les solution radicale en premier Smiley biggol

Pour la concurrence: ok, pas de soucis, je savais pas.
(p.s. je suis dyslexique moi donc désolé pour les fautes d'orthographe !)

C'est cool pour ton problème qu'il soit résolu !
Oublie pas de mettre [RESOLU] devant ton titre Smiley ravi

Felipe

Administrateur

25 Jan 2008 à 17:46

Bonjour,

merci d'éviter à l'avenir les titres avec des mots inutiles en majuscules, nous aimons bien pouvoir trouver rapidement l'information Smiley cligne

wasted a écrit :
hmmm, comme elle me prend pour une chèvre la chum !

Je suis pas sûr que tes interlocuteurs prendraient tous cette familiarité très bien. Ca a l'air de convenir à chum mais parfois ... Sur le net on ne sait jamais vraiment qui est la personne en face: 15 ou 65 ans, collet-monté ou total cool ... Smiley cligne

Quant à la "concurrence" d'AlsacréationSSS, euh comment dire:
- Alsacreations.com est un site communautaire axé sur les standards du web et l'accessibilité. Qui dit communautaire dit entraide et pour cela il faut des ressources utiles. Elles ne sont pas nées avec Alsacréations et elles ne sont certainement pas exhaustives ... Vive Openweb, Pompage et tous les autres. A titre d'exemple et si tu vois les pubs affichées en haut du forum, le 2ème livre est celui de Mathieu Nebra (Site du Zéro). Il est très bien aussi Smiley lol

Les différents modérateurs et ex-modérateurs, contributeurs du forum, des tutos et du blog travaillent où ça leur chante. Si depuis le temps ça avait dû poser un problème ...

- Alsacreations.fr est une entreprise (fondée par dew et Raphaël) donc elle a par définition des concurrents, mais c'est le genre de concurrents qui se tape dans le dos à Paris Web ou fréquente les mêmes salons et groupes sur Face bouc et Flickr Smiley cligne

zzzazzz

25 Jan 2008 à 20:57

Chum a écrit :

(p.s. je suis dyslexique moi donc désolé pour les fautes d'orthographe !)

Et bien un petit correcteur d'orthographe en français couplé à Firefox que tu utilises peut-être, et on en parle plus Smiley cligne

Sujet clos

Questions générales et questions de débutants

[RESOLU] Différences gestion CSS IE / Firefox : AAAAAAAAh !