Problème FF/IE/Google chrome sur site en ligne mais pas en local

Question

seb111

17 Nov 2012 à 15:41

Bonjour a tous,
Je débute en programmation et j'ai voulu apprendre donc j'ai développer mon site en local tous est comme je le souhaite seulement voila une fois que je l'ai mis en ligne (héberger par free) plus rien ne va.
Voici donc mes questions :
- Je trouve le chargement des pages long donc est-ce que le code n'est pas optimiser , est-ce ma connexion ou mon pc qui rame ou voir la bande passante de free?
- Sur FF et google chrome la mise en page est bien or sous IE tout est en vrac c'est due a quoi?

Voici l'url du site en ligne : Mon site

voici le code CSS :



body {
	background : url(image/bg.jpg);
	background-repeat: repeat-x;
}
img{
	border: none;
}
.cadre {
	width: 700px;
	background-color: #dcc5f3;
	padding: 20px 20px 16px 20px;
	color: #8e7de8;
	margin-left:auto;
	margin-right:auto;
	font-family: "Arial";
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
.clear {
	clear: both;
}
.focus{
	background: beige;
	color: black;
}
.normal{
	background: white;
	color: black;
}
#resultat{
	text-align: center;
	margin-bottom: 16px;
	font-size: 14px;
	height: 48px;
}
.erreur {
	background-color: #ff2323;
	color: black;
	text-align: center;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
.succes{
	background-color: #2ad42a;
	color: black;
	text-align: center;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}

.erreur img, .succes img{
	height: 48px;
	vertical-align: middle;
}
#center_text{
	height: 48px;
	line-height: 48px;
	float: right;
	width: 480px;
}
#center_text #text{
	vertical-align: middle;
	display: inline-block;
	line-height: 19px;
}
a{
	text-decoration: none;
}
ul {
	list-style-type: none;
	float : right;
	font-size: 17px;
	margin-bottom: 64px;
	
}
li {
	float: right;
	background: url(image/img_menu.png) no-repeat 0em 0em;
	background-size: 20px;
	padding-left: 22px;
	margin-left: 8px;
	color: #6044ec;
	height: 20px;
}
ul li:hover {
	color: #f9b25e;
	cursor: pointer;
	background: url(image/img_menu-hover.png) no-repeat 0em 0em;
	background-size: 20px;
}
ul li a {
	float: right;
}
.date_heure {
	margin-right: 32px;
	border: 0.125em solid grey;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	padding : 0px 24px 0px 24px;
}
#bloc_centre{
	margin-top: 48px;
}
#cote_gauche {
	float: left;
	width: 190px;
	padding-left: 3px;
	border-right: 2px dashed #c3c3b1;
}
#cote_gauche h4{
	width: 185px;
	font-size: 14px;
	padding-top: 4px;
	background-color: white;
	border-bottom: dotted 1px black;
	border-top: dotted 1px black;
}
#cote_droit {
	float: right;
	width: 480px;
	padding-left: 16px;
}
h2 {
	margin: 0px;
	font-style: italic;
}

h6{
	font-size: 16px;
}
#login{
	text-align: right;
	padding-bottom: 3px;
	border-bottom: dotted 1px;
}
.button_center{
	text-align: center;
	cursor: pointer;
}
/* CSS spécifique a la page insciption.php */

.formulaire{
	margin-top: 32px;
	padding-left: 32px;
	padding-right: 32px;
	width: 432px;
}

label{
	display : inline-block;
	width: 224px;
	float : left;
}
#captcha{
	margin-left: auto;
	margin-right: auto;
	width: 240px;
}

#attente{
	z-index: 131231;
	text-align: center;
	display: none;
	filter: Alpha(Opacity=80);
	-moz-opacity: 0.8; 
	opacity: 0.8; 
	width: 100%; 
	height: 100%; 
	left: 0px; 
	position: fixed; 
	top: 0px; 
	background-color: white;
}

#attente2{
	z-index: 131232;
	background-color: Transparent;	
	display: none;
	width: 100%; 
	height: 100%; 
	left: 0px; 
	position: fixed;
	top: 0px; 
	text-align: center;
	padding-top: 250px;
}
#attente2 button:active{
	-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
						hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	box-shadow: 		inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
							hsl(340, 70%, 50%) 0 .1em 3px, hsl(340, 80%, 40%) 0 .3em 1px, /* color border */
							rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
	-webkit-transform: inherit;
	-moz-transform: inherit;
	color: black;
}
#attenteTransparent{
	z-index: 131231;
	text-align: center;
	display:none;
	filter: Alpha(Opacity=01);
	-moz-opacity: 0.01;
	opacity: 0.01;
	width: 100%;
	height: 100%;
	left: 0px;
	position: fixed;
	top: 0px;
	background-color: white;
}

/* Sondage */
#sondage{
	font-size: 12px;
	width: 192px;
}
.sondage_header{
	height: 64px;
	width:192px;
}
.question{
	height: 64px;
	line-height: 64px;
	float: right;
	margin: 0px;
	width: 140px;;
}
.bulle{
	float: left;
}
.question span{
	vertical-align: middle;
	display: inline-block;
	line-height: 19px; 
	text-align: left;
}
#vote{
	margin-top: 16px;
}
/* info membre */
#info_membre{
	font-size: 12px;
}
#info_membre a{
	display: block;
	height: 14px;
}
#info_membre a img{
	vertical-align: middle;
	width: 24px;
	margin: -8px -4px 0px -8px;
}
}

Voici le code de la page index.php


<?php
require_once("config/BDD.php");
require_once("classe/membre.php");
session_start();
?>
<!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>
<meta http-equiv="Content-Type" content="application/xhtml+html; charset=utf-8" />
<title>SudokuLand : Accueil</title>
<link rel="stylesheet" href="CSS/global.css" type="text/css" />
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="javascript/swfobject.js" type="text/javascript"></script>
<script src="ajax/index.js" type="text/javascript"></script>

</head>
<body>

<div class="cadre">
	<?php 
		include 'menu.php';
	?>
	<br class="clear" />
	<span id="date" class="date_heure"></span><span class="date_heure" id="heure"></span>
	<script type="text/javascript">
		date_heure("date","heure");
	</script>
	<div id="bloc_centre">
		<div id="cote_gauche">
			<?php 
				include 'bloc_gauche.php';
			?>
		</div>
		<div id="cote_droit">
			<h2>Sudoku-Land</h2>
			<p id="login">
				<?php 
					if (isset($_SESSION['info_membre'])){
						echo "<a href='deconnexion.php' style='color: green'>Se d&eacute;connecter</a>";
					}else{
						echo "<a href='inscription.php' style='color: red'>Inscrivez-vous</a>&nbsp;|&nbsp;<a href='connexion.php'>Se connecter</a>";
					}
				?>
			</p>
			<div id="resultat">
				<noscript class="erreur">Vous devez activer le javascript pour jouer au sudoku en ligne.</noscript>
				
			</div>
			<p>
			hg kjg hj hjkh hjg hjg jkghj ghj ghjkh hjg hjg kjlh kjghjg ghf gh fghjkgfhgdfgfrdt rfhjgngb hg hjhkjh,hngv hghjg  hj
			h gjhg;h,bnbvgfhgfhjghjg hgfdfgsdgrf dghghjguiy uhghjgfhrfty fghvnbhj gyhjg ftf ghcvvhjgvkjhfgtdghf gf jhg jhgjg hjg 
			hg hgfvh hjg ghfg hjg h jkghjb n,bhjg hj hgjkhukhyiutyurt kljkhjk ghftrseraer hfv hjg hkj hjkh jjh k hjhgjg khkj hkjh 
			</p>
			<h6>- Jouer en ligne au sudoku.</h6>
			<h6>- Passer de bon(s) moment(s) en jouant au sudoku.</h6>
			<h6>- Les meilleurs joueurs seront r&eacute;compens&eacute;s.</h6>
		</div>
		<br class="clear" />
	</div>
	<?php
	?>
</div>
<p style="text-align: center;width: 43.75em;margin:auto;">
	<a href="contact.php">Contact</a> - 
	<a href="reglement.php">R&eacute;glement</a><br /><br/>
	&copy;2008 Sudoku-Land | Designed by: Shilom
</p>
</body>
</html>

Merci d'avance pour vos réponse

PS: désoler pour ce long message

Antitrox

21 Nov 2012 à 15:06

personnellement je ne voix pas beaucoup de différence entre IE et FF rien n'est vraiment en vrac.... j'ai même regardé avec IE6 et là les seuls choses qui saute aux yeux c'est tes images :

http://sudokuland13.free.fr/CSS/image/alert.png
http://sudokuland13.free.fr/CSS/image/suppr.png

car cette version ne gère pas la transparence des png alors rien d'affolant et même pour ton le border sur la date et heure

fait de nouveau charger ta page et si tu as toujours un problème d'affichage poste un screen s'il te plait

Sujet clos

CSS et mise en forme, CSS3

Problème FF/IE/Google chrome sur site en ligne mais pas en local