Pages :
Bonjour,

J'ai créé une page web au bout duquel se trouve un formulaire.
Tout fonctionne parfaitement sur Safari et Chrome, en revanche au niveau de l'affichage de Firefox c'est completement décalé.

Voir capture d'écran.
upload/39657-bug.jpg

A gauche, le formulaire sur firefox, à droite, le formulaire sur safari et chrome.

Je ne peux pas changer le CSS, sinon c'est mon safari et mon chrome qui vont bugger.
Seulement, je ne peux pas laisser ca comme ca sur chrome.

Quelqu'un aurait-il une solution s'il vous plait!? C'est pour un examen en fin de semaine, et je panique un peu à l'idée de le rater à cause de ca!

Merci d'avance!
Modifié par rolling-home (21 Aug 2011 - 22:50)
rolling-home a écrit :
...
Je ne peux pas changer le CSS, sinon c'est mon safari et mon chrome qui vont bugger.
...


C'est pourtant ton fichier CSS qui compte le plus ici »
Puisses-tu montrer tes instructions CSS ?

C'est possiblement la structure globale de cette zone qui n'est pas définie en CSS : ou tout simplement mal définie.

..
Modifié par zardoz (21 Aug 2011 - 23:06)
Une capture d'écran ça aide pas. Sans voir ton code (CSS + HTML) ou mieux ta page en ligne on ne pourra pas t'aider.
T'aurais pas par hasard utilisÉ des propriétés du type webkit, moteur commun à safari et chrome?
Dans ce cas faut mettre les correspondantes -moz- si elles existent
Modifié par jmlapam (21 Aug 2011 - 23:31)
jmlapam a écrit :
T'aurais pas par hasard utilisÉ des propriétés du type webkit, moteur commun à safari et chrome?
Dans ce cas faut mettre les correspondantes -moz- si elles existent


Non je n'ai pas utilisé de propriété webkit dans ce cas-ci, bien que j'ai quelques propriétés de css 3
Salutation @tous

D'ailleurs je me demande pourquoi on parle de « bug » dans un cas pareil. Et c'est fréquent.
Il ne s'agit pas d'un « bug » ici. Mais de simples instructions CSS exécutées différemment d'un navigateur à un autre.

Si ces instructions sont bien définies, tous les navigateurs vont les représenter correctement. C'est ce que nous faisons tous les jours. C'est même plus un problème.

Quand on dit « bug » on remet la faute au navigateur.
Le développeur n'est certe pas coupable de quoique ce soit. Smiley cligne

Faut voir ton CSS. Smiley smile

..
J'ai vu ton CSS. Sous IE8 et FF 5.0, et tout suite on voit le scrollbar horizontale. C'est un des signes les plus important qui concerne un manque d'instructions sur la structure globale, sur l'ensemble de la page.

Un width n'est pas défini ici sur body » width:100%. Ni overflow:auto qui règlerait définitivement la question du scrollbar horizontale.

C'est du Eric Meyer comme instructions CSS.
Moi perso Eric Meyer ne m'impressionne pas, mais vraiment pas.

Ton fichier a quand même 292 lignes. Pas facile à vérifier.
D'autant plus que dès l'élément « body » tu perd le contrôle de ta page sur des questions importantes.

..
Modifié par zardoz (22 Aug 2011 - 00:06)
Ça balance!
Elle devrait poster la partie CSS qui coince, on va pas se taper 292 lignes +règle 8, attention...
#sidebar {
width: 279px;
height: 750px;
float: right;
margin: 20px 0 20px 20px;
background-color: #ab8e6e;
}

#logo {
margin: 35px;
}

#prod {
margin: 42px;
}

#prod li {
line-height: 1.3;
}

strong {
font-weight: bold;
}

textarea {
margin: 20px 10px 20px 40px;
background-color: #d7d2bb;
padding: 5px;
line-height: 1.6;
height: 20px;
color: #69665b;
}

#go, #votez {
text-indent: -9999px;
cursor:pointer;
display: block;
}

#go {

background: url(../img/go.jpg) no-repeat;
width: 40px;
height: 32px;
margin: -55px 0 30px 220px;
}

#votez {
background: url(../img/votez.jpg) no-repeat;
width: 85px;
height: 33px;
margin: 20px 0 30px 175px;
}

#saison1 {
margin: 20px 0 5px 100px;
}

.saison {
margin: 5px 0 5px 100px;
}
[/code]

Voila j'ai isolé la partie (le formulaire qui ne va pas)
Merci d'avance

Et je vous prie de m'excuser si mes questions paraissent idiotes, ou si je n'ai pas encore les bons réflexes. Mais je suis débutante. Et il y a probablement des tas de bases que j'ignore ou ne maitrise pas encore
J'envoie tjs mon css en entier, au cas ou ...

/*  http://meyerweb.com/eric/tools/css/reset/  
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end reset CSS */




/* -------- GENERAL -------- */

body {
	
	font-family: Helvetica, arial, sans-serif;
	font-size: 13px;
	background-color: #d7d2bb;
	}
	
#container {
	margin: 0 auto;
	background-color: #d7d2bb;
	height: 1200px;
	width: 1024px;
	}
	
	@font-face {
				font-family: 'Impact';
				src: url('../font/Impact.eot');
				src: local('☺');
				src: local('Impact'), local('Impact'), url('font/Impact.ttf') format('truetype');
			}
	
	h1, legend {
		font-family: Impact, helvetica, arial, sans-serif;
		text-transform: uppercase;
		font-size: 24px;
		margin: 20px 42px;
		color: #bcd5de;
		letter-spacing: 1px;
		
		text-shadow:#111 0 0 0, #111 0 0 2px , #111 0 2px 1px;
		}
		
	#header {
		background: url(../img/head_bg1.png) no-repeat;
		width: 1024px;
		height: 415px;
		margin: 0 auto;
		}
		
		#sidebar {
			width: 279px;
			height: 750px;
			float: right;
			margin: 20px 0 20px 20px;
			background-color: #ab8e6e;
			}
			
			#logo {
				margin: 35px;
				}
				
				#prod {
					margin: 42px;
					}
					
					#prod li {
						line-height: 1.3;
						}
						
						strong {
							font-weight: bold;
							}
		
			textarea {
				margin: 20px 10px 20px 40px;
				background-color: #d7d2bb;
				padding: 5px;
				line-height: 1.6;
				height: 20px;
				color: #69665b;
				}
			
			#go, #votez {
				text-indent: -9999px;
				cursor:pointer;
				display: block;
				}
				
			#go {
				
				background: url(../img/go.jpg) no-repeat;
				width: 40px;
				height: 32px;
				margin: -55px 0 30px 220px;
				}
				
			#votez {
				background: url(../img/votez.jpg) no-repeat;
				width: 85px;
				height: 33px;
				margin: 20px 0 30px 175px;
				}
				
			#saison1 {
				margin: 20px 0 5px 100px;
				}
				
			.saison {
				margin: 5px 0 5px 100px;
				}
				
			
				
				
	#nav {
			list-style: none;
			background-color: #60402b;
			width: 722px;
			margin: 20px 20px 20px 0;
			position: absolute;
			float: left;
			}
			
			
			#nav li a {
				font-family: Impact, helvetica, arial, sans-serif;
				float: left;
				height: 50px;
				text-decoration: none;
				font-size: 24px;
				text-transform: uppercase;
				color: #bcd5de;
				text-align: center;
				padding: 20px 25px 0 25px;
				letter-spacing: 1px;
		
				text-shadow:#111 0 0 0, #111 0 0 2px , #111 0 2px 1px;
				}
				
				#nav li:first-child {
					margin-left: 37px;
					}
					
					#nav li a:hover {
						background-color: #ab8e6e;
						height: 50px;
						line-height: 25px;
												
						}
						
						#nav li .active {
							color: #ab8e6e;
							height: 70px;
							}
							
						
		
	#content {
		width: 722px;
		height: 657px;
		background-color: #ab8e6e;
		float: left;
		margin: 113px 0 0 0;
		}
		
		.date {
			font-size: 12px;
			color: #5d5d5d;
			}
			
		.news, .date {
			margin: 10px 30px 0 30px;
			}
			
		.news {
			margin-bottom: 40px;
			}
			
			.lien a {
				color: #111;
				text-decoration: underline;
				}
			
			#thumb_30min a {
				width: 90px;
				height: 132px;
				margin: 0 0 20px 147px;
				border: 3px solid white;
				display: block;
				background: url(../img/30min.jpg) no-repeat;
				text-indent: -9999px;
				}
		
		#side-content {
			width: 263px;
			height: 575px;
			background-color: #d7d2bb;
			float: right;
			margin: -40px 20px 0 40px;
			padding: 20px;
			}
			
			.first-p {
				margin: 20px 10px 20px 10px;
				}
				
			p {
				margin: 10px;
				line-height: 1.3;
				}
				
				.italic {
					font-style: italic;
					}
					
				.red, .character {
					color: #c00343;
					}
						
				.red {
					font-weight: bold;
					}
					
			#youtube a, #imdb a, #nbc a {
				width: 240px;
				height: 90px;
				text-indent: -9999px;
				display: block;
				}
				
			#youtube, #imdb, #nbc {
				margin: 20px 0 0 10px;
				}
			
			#youtube {
				background: url(../img/youtube.jpg) no-repeat;
				margin-top: 20px;
				}	
				
			#imdb {
				background: url(../img/imdb.jpg) no-repeat;
				}
				
			#nbc {
				background: url(../img/nbc.jpg) no-repeat;
				}
zardoz a écrit :
J'ai vu ton CSS. Sous IE8 et FF 5.0, et tout suite on voit le scrollbar horizontale. C'est un des signes les plus important qui concerne un manque d'instructions sur la structure globale, sur l'ensemble de la page.

Un width n'est pas défini ici sur body » width:100%. Ni overflow:auto qui règlerait définitivement la question du scrollbar horizontale.

C'est du Eric Meyer comme instructions CSS.
Moi perso Eric Meyer ne m'impressionne pas, mais vraiment pas.

Ton fichier a quand même 292 lignes. Pas facile à vérifier.
D'autant plus que dès l'élément « body » tu perd le contrôle de ta page sur des questions importantes.

..



Merci BCP!!, donc je dois mettre le overflow:auto dans le body?
Et je ne comprend pas bien ce que tu veux dire pas "D'autant plus que dès l'élément « body » tu perd le contrôle de ta page sur des questions importantes." ?

Merci d'avance
Perso je ne pourrai pas t'aider parce que ta page est trop avancée.

Mais si tu veux un exemple d'un contrôle complet d'une page juste avec quelques lignes d'instructions CSS : vois le code ici »


// -- D'autres instructions pourront aussi être définies
body { width:100%; overflow:auto; margin:0; padding:0; }


Juste avec ça tu as le contrôle de ta page : largeur 100% et sans scrollbar horizontale.
C'est la notion d'héritage qui compte le plus en CSS. Ces instructions se partage sur tous les éléments HTML parce que ceux-ci sont imbriquer dans « body ». Tous hérites de body, c'est le parent.

On est loin du Eric Meyer.

..
Modifié par zardoz (22 Aug 2011 - 00:34)
zardoz a écrit :
Perso je ne pourrai pas t'aider parce que ta page est trop avancée.

Mais si tu veux un exemple d'un contrôle complet d'une page juste avec quelques lignes d'instructions CSS : vois le code ici »


// -- D'autres instructions pourront aussi être définies aussi  --
body { width:100%; overflow:auto; margin:0; padding:0; }


Juste avec ça tu as le contrôle de ta page : largeur 100% et sans scrollbar horizontale.
C'est la notion d'héritage qui compte le plus en CSS. Ces instructions se partage sur tous les éléments HTML parce que ceux-ci sont imbriquer dans « body ». Tous hérites de body, c'est le parent.

On est loin du Eric Meyer.


Merci bcp pour ta gentillesse et ta patience!
J'ai essayé de mettre un overflow:auto dans le body, mais alors elle coupe la moitié de ma page de manière verticale, et je n'ai plus l'entièreté de mon site. La scrollbar vertical est mise là exprès, la page faisant 1200px de hauteur.
C'est pour ça que je ne tiens pas à t'aider. Parce que ta page est trop avancé et que de nouvelles instructions pourront détruire, plus que construire. N'oublis pas que tu as déjà des règles instruites pour ta page.

Il y aura des répercussions majeurs sur l'ensemble de ta page. Vaut mieux oublier ou tu accepte de tout reprendre ton fichier CSS.

Il faut justement que tu garde le scroll verticale c'est celui horizontale qui doit disparaître.

..
Modifié par zardoz (22 Aug 2011 - 00:40)
Ne met pas en pratique mes propos. Je n'ai parler que de « body », mais il devra aussi avoir un « div#globale ». Ce « div#globale » est important car c'est celui-ci qui contiendra l'ensemble de la page.

Mais tu es trop avancé donc difficile de reprendre la structure de ta page. Dans un cas pareil vaut mieux recommencer. Le fait de régler la zone de formulaire, ne règlera pas la structure globale de ta page.

M'enfin désolé. Smiley smile

Ce qu'il faut retenir c'est que les premières instructions en CSS concerne l'ensemble de la page. Tout prévoir. Les premières instructions ne sont pas nécessairement en visuelles, c'est une structure solide qui n'est pas visible, mais quand même présente.

Si quelqu'un peut trouver une solution pour ta question de formulaire, tant mieux.

Bonne chance.

..
Modifié par zardoz (22 Aug 2011 - 01:05)
Oui faut un bloc conteneur qui englobe tout le site, mais zardoz dit juste. Si tu modifie un css existant sans savoir où tu vas tu risques de tout dégrader. Garde au moins une copie de l'original .

Sinon Y a la solution WYSIWYG wufoo.com mais c'est du contournement, normalement c'est personnalisable à souhait mais qui dit WYSIWYG dit rien à apprendre, donc des liens pas trop appréciés ici et à raison.
Un bloc conteneur ? Vous savez que body est un bloc conteneur ? Une div d'id "global" n'est pas toujours nécessaire.


Et si on commençait pas résoudre les problèmes de validation sur le quizz ? Ça peut peut-être jouer Smiley smile (il manque des id sur les boutons radio des saisons 2 et 3)

Il y a aussi un src sur un lien, dans le div d'id "thumb_30min".
Modifié par AkaiKen (22 Aug 2011 - 09:10)
Pages :