28173 sujets

CSS et mise en forme, CSS3

GROS GROS SOUCIS D'AFFICHAGE SUR FIREFOX!

SAlut à tous,

JE tiens à signaler que je débute quelque peu en CSS. Voilà, cela fait 2 semaines que je développe mon futur site en full CSS en testant l'affichage sous IE. D'aprés les conseils que j'avais pu récupérer à droite à gauche sur le WEB, je savais qu'il fallait tester l'affichage sous FIreFOx... Mais, quelle ne fut pas ma surprise, quand hier, j'ai télécharger FireFox et teste mon site!!! Un véritable désastre...tous mes divs enchevétrés les uns sur les autres..
Ci dessous mon code CSS et HTML, pourriez vous me dire quelle est la plus grosse bourde que j'ai comise pour obtenir un si faible résultat sur FIreFox.. je rappelle que sur IE ca fonctionne tiptop!
MErci pour votre aide:
Vincent.


CSS:

/**************************DEBUT Grille de mise en page****************************************************************/

BODY {
BACKGROUND-COLOR: #CDCDCD;
text-align: center;
}

#Layout
{
background-color: #ffffff;
border-bottom: 1px solid;
border-bottom-color: #B2B2B2;
border-right: 3px solid;
border-right-color: #B2B2B2;
border-left: 1px solid;
border-left-color: #B2B2B2;
border-top: 1px solid;
border-top-color: #B2B2B2;
position: relative;
text-align: center;
width: 970px;
}

#Entete_gauche
{
background: url(/French/Images/Entete_Degrade.gif);
background-position: right top;
background-repeat: repeat-x;
float:left;
width: 940px;
position:relative;
text-align: left
}

#Entete_droite
{
background-image: url(French/Images/coin_page.gif);
float:right;
height: 33px;
position:relative;
width: 26px
}

#Menu_haut
{
height: 37px;
background-color: #404040;
border: 1px solid;
padding: 0px 0px 0px 0px;
position: relative;
text-align: left;
width: 100%
}

#Menu_gauche
{
float:left;
WIDTH: 130px;
height: 600px;
POSITION: relative;
BACKGROUND-COLOR: #404040;
TEXT-ALIGN: left;
border: 1px solid;
}

#Colonne_centre
{
background-position: right top;
background-repeat: repeat-x;
border: 1px solid;
float:left;
height: 600px;
text-align: left;
width: 710px;
}

#Colonne_droite
{
float:right;
WIDTH: 120px;
BACKGROUND-COLOR: #ff3300;
border: 1px solid;
}

#Pied_page_top
{
width: 100%;
position: relative;
border-color: #0066FF;
background-image: url(/French/Images/Pied_page_top.gif);
background-repeat: repeat-x;
text-align: left;
border: 1px solid;
}

#Pied_page_centre
{
width: 100%;
position: relative;
border-color: #0066FF;
background-color: #8DC63F;
background-position: left 50%;
text-align: left;
border: 1px solid;
}

#Pied_page_bottom
{
width: 100%;
position: relative;
border-color: #0066FF;
background-image: url(/French/Images/Pied_page_bottom.gif);
background-repeat: repeat-x;
text-align: left;
border: 1px solid;
}


/**************************FIN Grille de mise en page****************************************************************/

/**************************DEBUT Eléments de l'entete****************************************************************/

#Entete_logo
{
float:left;
}

#Entete_legal
{
position: absolute;
top: 30px;
left: 540px;
}

#Entete_legal P
{
BORDER-BOTTOM: 0px;
BORDER-LEFT: 0px;
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
MARGIN: 0px;
font-size: 10px;
color: #404040;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}


#Entete_legal UL
{
BORDER-BOTTOM: 0px;
BORDER-LEFT: 0px;
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
MARGIN: 0px;
}

#Entete_legal LI
{
display: inline;
padding-left: 10px;
padding-right: 10px;
}

/**************************FIN Eléments de l'entete****************************************************************/



/**************************DEBUT Eléments du menu haut****************************************************************/

#header_menu_base
{
PADDING-RIGHT: 0px; PADDING-LEFT: 150px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 768px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 37px; TEXT-ALIGN: left
}
#header_menu_nav
{
PADDING-RIGHT: 0px; DISPLAY: inline; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 37px
}
#header_menu_nav LI
{
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#header_menu_nav LI A
{
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 37px; HEIGHT: 0px! important
}
#header_menu_nav LI A:hover
{
BACKGROUND-POSITION: 0px -37px
}
#header_menu_nav LI A:active
{
BACKGROUND-POSITION: 0px -74px
}
#header_menu_nav .active A
{
BACKGROUND-POSITION: 0px -74px
}
#header_menu_nav .active A:hover
{
BACKGROUND-POSITION: 0px -74px
}
#header_main A
{
BACKGROUND: url(/French/Images/menu-haut/header_main.gif) no-repeat left top; WIDTH: 66px
}
#header_contents A
{
BACKGROUND: url(/French/Images/menu-haut/header_ourcontent.gif) no-repeat left top; WIDTH: 76px
}
#header_faq A
{
BACKGROUND: url(/French/Images/menu-haut/header_faq.gif) no-repeat left top; WIDTH: 52px
}
#header_about A
{
BACKGROUND: url(/French/Images/menu-haut/header_about.gif) no-repeat left top; WIDTH: 75px
}
#header_contact A
{
BACKGROUND: url(/French/Images/menu-haut/header_contactus.gif) no-repeat left top; WIDTH: 69px
}

/**************************FIN Eléments du menu haut****************************************************************/



/**************************DEBUT Eléments du menu gauche****************************************************************/
UL.menusx
{
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: left;
TEXT-DECORATION: none
}
UL.menusx LI
{
DISPLAY: inline;
TEXT-DECORATION: none
}
UL.menusx LI A
{
BACKGROUND: url(/French/Images/menu_gauche/Pink-arrow.gif) no-repeat left;
BACKGROUND-COLOR: #404040;
COLOR: #F4F4F4;
DISPLAY: block;
FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 11px;
LINE-HEIGHT: 15px;
MARGIN: 1px 2px 2px 4px;
PADDING-BOTTOM: 1px;
PADDING-LEFT: 10px;
PADDING-RIGHT: 4px;
PADDING-TOP: 1px;
TEXT-DECORATION: none
}
UL.menusx LI A:hover
{
font-size: 11px;
COLOR: #333;
BACKGROUND-COLOR: #858585
}



/**************************FIN Eléments du menu gauche****************************************************************/

/**************************DEBUT Eléments colonne centrale****************************************************************/
#Colonne_centre_bande_sup
{
background: url(/French/Images/Colonne_centre_bande_sup.gif);
border:1px solid;
float:left;
height:54px;
padding-right:50px;
padding-top:7px;
text-align:right;
width:100%;
}

#Colonne_centre_bande_inf
{
background: url(/French/Images/Colonne_centre_bande_inf.gif) repeat-x;
float:left;
height:79px;
padding-right:0px;
padding-top:0px;
width:100%;
}

#image_box
{
float:left;
margin-top:15;
padding-left:20px;
padding-right:px;
padding-top:15px;
width:116px;
}
/**************************FIN Eléments colonne centrale****************************************************************/





/**************************DEBUT Eléments divers****************************************************************/

.bouton
{
cursor: pointer;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
FONT-SIZE: 11px;
}

H1
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
FONT-SIZE: 23px;
TEXT-DECORATION: none;
}

H2
{
COLOR: #2e2e2e;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
FONT-SIZE: 16px;
TEXT-DECORATION: none;
}

A
{
font-size: 10px;
color: #404040;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}

A:hover
{
font-size: 10px;
color: #CC0066;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}






/**************************FIN Eléments divers****************************************************************/


/**************************DEBUT Définition des fonts****************************************************************/

.font_style_1 /*Couleur blanche 11 px*/
{
COLOR: #FFFFFF;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
FONT-SIZE: 11px;
TEXT-DECORATION: none;
}
.font_style_2 /*Couleur noire 15px*/
{
COLOR: #000000;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
FONT-SIZE: 15px;
TEXT-DECORATION: none;
}

.font_style_3 /*Couleur "grise" 11px*/
{
COLOR: #666666;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
FONT-SIZE: 11px;
TEXT-DECORATION: none;
}

.font_style_4 /*Couleur "rouge" 11 px*/
{
COLOR: #D60A30;
FONT-FAMILY: Arial, Verdana, Helvetica, sans-serif;
FONT-SIZE: 11px;
TEXT-DECORATION: none;
}
.font_style_5 /*Couleur "rose" 15 px*/
{
color: #CC0066;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 15px;
text-decoration: none;
}



/**************************FIN Définition des fonts****************************************************************/



HTML:

<?php
session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<link href="../Style_base.css" rel="stylesheet" type="text/css">
<link href="../Style_index.css" rel="stylesheet" type="text/css">
</head>
<body>
<DIV id=Layout>
<DIV id=Entete_gauche>
<DIV id=Entete_logo>
<A title="Faites parler vos photos!" href="http"><IMG src="../French/Images/Logo-site-accueil.gif" border=0></A>
</DIV>
<DIV id=Entete_legal>
<?php
if (isset($_COOKIE["votrecalendrier"]))//V&eacute;rifie si presence cookie
{
$cookie = $_COOKIE["votrecalendrier"];
echo "<P>";
echo "Bienvenue : ".$cookie;
echo "</P>";
$verified_user = $cookie;
session_register("verified_user");
}
else
{
if(isset($_SESSION["verified_user"]))// Verifie si session en cours (au cas ou les cookies soient interdit par le navigateur
{
echo "<P>";
echo "Bienvenue : ".$verified_user;
echo "</P>";
}
else
{
echo "<UL>";
echo "<LI>";
echo "<A href='http/French/privacy.php'>Politique de Confidentialité</A>";
echo "</LI>";
echo "<LI>";
echo "<A href='http/French/prices.php'>Tarifs</A>";
echo "</LI>";
echo "</UL>";
}
}
?>
</DIV>
</DIV>
<DIV id=Entete_droite>
</DIV>
<DIV id=Menu_haut>
<DIV id=header_menu_base>
<UL id=header_menu_nav>
<LI class=active id=header_main>
<A href="http">Accueil</A>
</LI>
<LI id=header_contents>
<A href="http/Photobulle/photobulle.php">Contenus</A>
</LI>
<LI id=header_faq>
<A href="http/French/faq.php">FAQ</A>
</LI>
<LI id=header_about>
<A href="http/French/us.php">A propos</A>
</LI>
<LI id=header_contact>
<A href="http/French/contact.php">Contact</A>
</LI>
</UL>
</DIV>
</DIV>
<DIV id=Menu_gauche>
<UL class=menusx>
<LI><A></A>
<LI><A></A>
<LI><A></A>
<LI><A></A>
<?php
if (!isset($_COOKIE["votrecalendrier"])|| !isset($_SESSION["verified_user"]))//V&eacute;rifie si presence cookie
{
echo "<LI><A title='Inscription' href=''>Log/Inscription</A> ";
}
?>
<LI><A title="Fonctionnement du site" href="http/howitworks.php">Fonctionnement</A>
<LI><A title="A propos" href="http/us.php">A propos</A>
<LI><A title="FAQ" href="http/faq.php">FAQ</A>
</UL>
</DIV>
<?php
if (isset($_COOKIE["votrecalendrier"])|| isset($_SESSION["verified_user"]))//V&eacute;rifie si presence cookie
{


}
else
{
echo "<DIV id=Colonne_centre>";
echo "<DIV id=login_box>";
echo "<H1>MEMBRES :</H1>";
echo "<FORM action='../French/security/securite.php' method='post' >";
echo "<P>";
echo "<LABEL class=font_style_1>Vous êtes membres? Loguez-vous :</LABEL>";
echo "</P>";
echo "<P>";
echo "<LABEL class=font_style_1>Login :</LABEL>";
echo "<INPUT class=font_style_2 type='text' name='userid' size='20' maxlength='40' value=''>";
echo "</P>";
echo "<P>";
echo "<LABEL class=font_style_1>Mot de passe :</LABEL>";
echo "<INPUT class=font_style_2 type='password' name='password' size='14' maxlength='40' value=''>";
echo "</P>";
echo "<P>";
echo "<INPUT class=bouton type='submit' value='Envoyer'>";
echo "<INPUT name='checkbox' type=checkbox checked value=checkbox>";
echo "<LABEL class=font_style_1>Se souvenir de moi</LABEL>";
echo "</P>";
if ($_GET["m"]=="1")
{
echo "<p class=font_style_4>Mauvais login ou mot de passe !</p>";
}
echo "</FORM>";
echo "<DIV id=separateur></DIV>";
echo "<A class=font_style_1 href='http/French/security/loginlost.php'>Vous avez oublié votre mot de passe ?</A> </DIV>";
echo "<DIV id=separateur_box>";
echo "<IMG src='../French/Images/separateur_inscription.gif' border=0>";
echo "</DIV>";
echo "<DIV id=inscription_box>";
echo "<H1>INSCRIPTION :</H1>";
echo "<P>";
echo "<LABEL class=font_style_1>Vous recevrez un email afin de confirmer votre inscription pour avoir ensuite accès à l'ensemble du site:</LABEL>";
echo "</P> ";
echo "<FORM ACTION='../French/security/signup.php'>";
echo "<INPUT class=bouton type='submit' value='Je continue...'>";
echo "</FORM>";
echo "</DIV>";
echo "</DIV>";
}
?>
<DIV id=Colonne_droite>
<script type="text/javascript"><!--
google_ad_client = "pub-6752269698556449";
google_ad_width = 120;
google_ad_height = 600;
google_ad_format = "120x600_as";
google_ad_type = "text";
google_ad_channel ="";
google_color_border = "ECEAD3";
google_color_bg = "F7F7ED";
google_color_link = "D0598F";
google_color_url = "788059";
google_color_text = "1F5185";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></DIV>
</DIV>
<DIV id=Pied_page_top>
</DIV>
<DIV id=Pied_page_centre><img src="../French/Images/menu_bas/Bouton1.bmp"><img src="../French/Images/menu_bas/Bouton2.bmp"><img src="../French/Images/menu_bas/Bouton3.bmp"><img src="../French/Images/menu_bas/Bouton4.bmp"><img src="../French/Images/menu_bas/Bouton5.bmp"><img src="../French/Images/menu_bas/Bouton6.bmp" alt="fdfdf" longdesc="http://fdfdfdfdf.com">
</DIV>
<DIV id=Pied_page_bottom>
</DIV>
</BODY>
</html>
Bonjour zipi et bienvenue sur Alsacréations, Smiley biggrin

Deux petites choses avant d'entre dans le vif de tes soucis:
-merci d'éditer ton titre pour des minuscules (bouton éditer en haut à droite de message), l'usage de majuscules pourrait faire penser aux membres du forum que tu cries, ce qui n'ai pas le cas Smiley cligne ;
-merci également de présenter lisiblement le code dans tes messages en t'aidant des BBcode présents dans la zone d'édition des message, ou en l'encadrant par [ code] et [ /code] (sans espaces) comme indiqué dans les règles. Smiley biggrin
Deux semaines de développement avec IE avant de tester avec Firefox/Opera/Safari/n'importe quel navigateur ayant une gestion correcte des standards… ben c'est un peu suicidaire comme méthode. Maintenant tu es au courant Smiley cligne

Le problème c'est que tu as déjà un code important, et qu'il est difficile d'isoler les problèmes. Tu pourrais, par exemple, tenter de restreindre ce code au strict minimum pour reproduire le problème, ce qui éliminerait les interférences. Bien sûr, c'est un travail à effectuer sur une copie. Il me semble d'ailleurs que c'est la méthode conseillée par les règles du forum.

Sinon, je te conseille fortement de mettre une page en ligne, pour que l'on puisse constater directement le problème, et t'aider plus rapidement.
Sujet clos
Aller à