Probleme sous Firefox, mais pas sous IE et Chrome !

Question

Shooye

17 May 2010 à 15:06

Bonjour à tous !
J'ai actuellement un problème sur le site internet que je suis en train de réaliser.
En effet sous IE, et sous Chrome, il n'y a aucun soucis, par contre il bug complètement sous Firefox ! O_O

J'ai l'habitude de résoudre les habituels problèmes CSS IE, mais l'inverse c'est beacoup moins évident, d'autant plus qu'il marche sur Chrome qui je croit utilise le moteur de Firefox !

Voilà l'adresse du site : http://www.skillzmeup.com/

Si quelqu'un aurait l'amabilité de regarder, ou aurait des pistes à me donner ?

Le HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="description" content="" /> 
	<meta name="keywords" content="" /> 
	<script src="http://skillzmeup.com/modules/droplets/js/mdcr.js" type="text/javascript"></script> 
	<link rel="stylesheet" type="text/css" href="http://skillzmeup.com/templates/skillzmeup/style.css" media="screen,projection" /> 
	<link rel="stylesheet" type="text/css" href="http://skillzmeup.com/templates/skillzmeup/style.css" media="print" /> 
	<title>Skillzmeup</title> 
</head> 
<body> 
<div id="wrapper"> 
	<div id="header"> 
		<div id="logo"> 
			<h1><img src="http://skillzmeup.com/templates/skillzmeup/images/coach_cash_game.png" /><p>Coaching Texas Holdem</p></h1> 
		</div> 
	</div> 
	<!-- end #header --> 
	<div id="menu"> 
		<ul class="menu-top"><li class="menu-current menu-first"><a href="http://skillzmeup.com" target="_top">Accueil</a></li><li class="menu-sibling"><a href="http://skillzmeup.com/pages/prestations.php" target="_top">Prestations</a></li><li class="menu-sibling menu-last"><a href="http://skillzmeup.com/pages/test.php" target="_top">test</a></li></ul>	</div> 
	<!-- end #menu --> 
	<div id="page"> 
	<div id="page-bgtop"> 
	<div id="page-bgbtm"> 
		<div id="content"> 
			<div class="post"> 
				<a class="section_anchor" id="wb_1" name="wb_1"></a><h2 class="jetons_bleu">Bienvenue sur Skillzmeup !</h2> 
<p class="sous_titre">L'essor du poker blablabla</p> 
<p>Sed si ille hac tam eximia fortuna propter utilitatem rei publicae frui non properat, ut omnia illa conficiat, quid ego, senator, facere debeo, quem, etiamsi ille aliud vellet, rei publicae consulere oporteret?</p> 
<p>Proinde die funestis interrogationibus praestituto imaginarius iudex equitum resedit magister adhibitis aliis iam quae essent agenda praedoctis, et adsistebant hinc inde notarii, quid quaesitum esset, quidve responsum, cursim ad Caesarem perferentes, cuius imperio truci, stimulis reginae exsertantis aurem subinde per aulaeum, nec diluere obiecta permissi nec defensi periere conplures.</p> 
<p>Nihil morati post haec militares avidi saepe turbarum adorti sunt Montium primum, qui divertebat in proximo, levi corpore senem atque morbosum, et hirsutis resticulis cruribus eius innexis divaricaturn sine spiramento ullo ad usque praetorium traxere praefecti.</p>			</div> 
	
		<div style="clear: both;">&nbsp;</div> 
		</div> 
		<!-- end #content --> 
		<div id="sidebar"> 
			<ul> 
				<li> 
					<div id="search" > 
					<form method="get" action="#"> 
						<div> 
							<input type="text" name="s" id="search-text" value="" /> 
							<input type="submit" id="search-submit" value="GO" /> 
						</div> 
					</form> 
					</div> 
					<div style="clear: both;">&nbsp;</div> 
				</li> 
				<a class="section_anchor" id="wb_5" name="wb_5"></a>			</ul> 
		</div> 
		<!-- end #sidebar --> 
		<div style="clear: both;">&nbsp;</div> 
	</div> 
	</div> 
	</div> 
	<!-- end #page --> 
</div> 
	<div id="footer"> 
		<p>Copyright (c) 2010 Skillzmeup.com. Tous droits reserv&eacute;s. - Design <a href="http://www.creation-site-annecy.com" title="creation site annecy">Shake Raise</a> - <a href="#">Prevention jeu</a> - <a href="#">Cr&eacute;dits et Mentions l&eacute;gales</a></p> 
	</div> 
	<!-- end #footer --> 
</body> 
</html>

Le CSS :



img {
border : 0;
}

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF url(images/img01.jpg) repeat-x left top;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #787878;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: normal;
	color: #32639A;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 2.4em;
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 180%;
}

ul, ol {
}

a {
	text-decoration: none;
	color: #4486C7;
}

a:hover {
}

#wrapper {
	width: 960px;
	margin: 0 auto;
	padding: 0;
}

/* Header */

#header {
	width: 940px;
	height: 148px;
	margin: 0 auto;
}

/* Logo */

#logo {
	float: left;
	margin: 0;
	color: #000000;
}

#logo h1, #logo p {
	margin: 0;
	padding: 0;
}

#logo h1 {
	float: left;
	padding-left: 0px;
	letter-spacing: -1px;
	font-size: 3.5em;
	color: #FFFFFF;
	display:block;
}

#logo h1 p {

float:right;
margin-top:30px;
margin-left:15px;
}

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #FFFFFF;
}

/* Search */

#search {
	float: right;
	width: 280px;
	height: 60px;
	padding: 20px 0px 0px 0px;
	background: #A8CF64;
	border-bottom: 4px solid #FFFFFF;
}

#search form {
	height: 41px;
	margin: 0;
	padding: 10px 0 0 20px;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search-text {
	width: 170px;
	padding: 6px 5px 2px 5px;
	border: none;
	background: #FFFFFF;
	text-transform: lowercase;
	font: normal 11px Arial, Helvetica, sans-serif;
	color: #5D781D;
}

#search-submit {
	width: 50px;
	height: 23px;
	border: 1px solid #89B056;
	background: none;
	font-weight: bold;
	font-size: 10px;
	color: #FFFFFF;
}

/* Menu */

#menu {
	width: 940px;
	height: 49px;
	margin: 0 auto;
	padding: 0;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	width: 115px;
	height: 33px;
	padding-top: 16px;
	text-decoration: none;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
	background: #659CEF url(images/img03.jpg) repeat-x left bottom;
	text-decoration: none;
}

#menu .current_page_item a {
	background: #FBFBFC url(images/img02.jpg) repeat-x left bottom;
	padding-left: 0;
	color: #30476A;
}

/* Page */

#page {
	width: 940px;
	margin: 0 auto;
	padding: 0;
}

#page-bgtop {
	padding: 20px px;
}

#page-bgbtm {
}

/* Content */

#content {
	float: left;
	width: 620px;
	padding: 30px 0px 0px 0px;
}

.post {
	margin-bottom: 15px;
}


#content h2 {
	margin-bottom: 10px;
	padding: 12px 0 0 0px;
	padding-left: 80px; 
	letter-spacing: -.5px;
	color: #32639A;
}

#content h2.jetons_bleu {
background:url(images/jetons_coach_poker.png) no-repeat;
}

#content h2.jetons_vert {
background:url(images/jetons_coach_poker_vert.png) no-repeat;
}

#content h2 a {
	color: #32639A;
	border: none;
}

.sous_titre {
	float: left;
	height: 24px;
	padding: 3px 15px;
	color: #4A81DE;
		background: #D8E7FE;
		font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	width:100%;
}

.links {
	padding-top: 20px;
	font-size: 12px;
	font-weight: bold;
}

/* Sidebar */

#sidebar {
	float: right;
	width: 280px;
	padding: 0px;
	color: #787878;
	background: #FFFFFF url(images/fond_droite.png) repeat-y;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#sidebar li {
	margin: 0;
	padding: 0;
	border-left: 1px solid #E2E2E2;
}

#sidebar li ul {
	margin: 0px 0px;
	padding-bottom: 30px;
}

#sidebar li li {
	line-height: 35px;
	border-bottom: 1px dashed #D1D1D1;
	margin: 0px 30px;
	border-left: none;
}

#sidebar li li span {
	display: block;
	margin-top: -20px;
	padding: 0;
	font-size: 11px;
	font-style: italic;
}

#sidebar h2 {
	height: 47px;
	padding-left: 80px;
	padding-top:15px;
	margin-left:30px;
	letter-spacing: -.5px;
	font-size: 1.8em;
	margin-bottom:10px;
}

#sidebar h2.jetons_bleu {
background:url(images/jetons_coach_poker.png) no-repeat;
}

#sidebar h2.jetons_vert {
background:url(images/jetons_coach_poker_vert.png) no-repeat;
}

#sidebar p {
	padding-left:30px;
	margin-bottom: 20px;
	text-align: justify;
}

#sidebar a {
	border: none;
}

#sidebar a:hover {
	text-decoration: underline;
	color: #8A8A8A;
}

/* Calendar */

#calendar {
}

#calendar_wrap {
	padding: 20px;
}

#calendar table {
	width: 100%;
}

#calendar tbody td {
	text-align: center;
}

#calendar #next {
	text-align: right;
}

/* Footer */

#footer {
	height: 50px;
	margin: 0 auto;
	padding: 0px 0 15px 0;
	background: #D8E7FE;
	border-top: 1px solid #D3DEF0;
	font-family: Arial, Helvetica, sans-serif;
}

#footer p {
	margin: 0;
	padding-top: 20px;
	line-height: normal;
	font-size: 10px;
	text-transform: uppercase;
	text-align: center;
	color: #A0A0A0;
}

#footer a {
	color: #5389E0;
}

bprod

17 May 2010 à 16:36

Et quel est le soucis précisément ?

Shooye

17 May 2010 à 17:06

http://img87.imageshack.us/img87/4469/pbskillzmeup.jpg

C'est plus simple, voià le problème !
Modifié par Florent V. (17 May 2010 - 21:29)

Shooye

17 May 2010 à 17:07

l'url de l'image pour la voir en plus grand : http://img87.imageshack.us/img87/4469/pbskillzmeup.jpg

bprod

17 May 2010 à 18:07

je n'ai pas ce problème sous FF 3.6.3

Shooye

17 May 2010 à 18:15

Effectivement on m'a confirmé que ca buggait plus sur la dernière version.
Moi j'ai 3.0.18, et ca bug...

C'est quand même pas terrible pour ceux qui ont ma version :\

Quelqu'un à une idée de ce qui a changé dans la dernière version qui aurait arrangé le bug ?

fvsch

17 May 2010 à 21:29

Shooye a écrit :
Quelqu'un à une idée de ce qui a changé dans la dernière version qui aurait arrangé le bug ?

Ça pourrait être: la manière d'auto-corriger les erreurs que contient ton code HTML. (Notamment le P dans un H1.)

Sujet clos

CSS et mise en forme, CSS3

Probleme sous Firefox, mais pas sous IE et Chrome !