Forum d'entraide PHPFrance

Hello hello,

je savais pas comment formuler le titre pour ce topic, mais plus précisement voilà ce qui m'amène: toutes mes includes sont rendu avec un saut de ligne sous FF3, je voulais savoir si vous avez constaté la même chose.

Explication en image:

Les flèches rouges montrent les sauts de lignes où sont les includes! Pour comparaison, voyez l'affichge sous Safari ci-dessous, qui lui est 'normal':

Et voici le code de ma page:

<?php
session_start();
$titre = "Music*boX v.3 :: accueil";
include ('includes/top.php');
?>
<body>
    <a name="top"></a>
    <div id="global">
<?php // Connection bdd
include('includes/db.php');
mysql_connect($host, $root, $mdp);
mysql_select_db($db);
?>
<?php include ('includes/header.php'); ?>
        <div id="center">
            <div id="left">
                <?php include ('includes/left.php'); ?>
            </div>
            <div id="right">
            </div>
            <div class="spacer">
            </div>
        </div>
        <?php include ('includes/footer.php'); ?>
    </div>
</body>
</html>

A part utiliser un autre navigateur, y a-t-il une solution php pour ce problème?

Bonjour,

Ce problème n'est en aucun cas un problème PHP mais uniquement un problème HTML et CSS.
Montre nous le code HTML généré et son CSS associé pour que l'on puisse t'aider.

Hello Arthur, merci de te pencher sur ma question!

J'ai pas dit que c'est un problème php, j'ai demandé si y avait une solution php... Voici le html généré et le css:

Code : Tout sélectionner

<!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" lang="fr">                                
  <head>                                                         
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />                                                         
    <meta content="stefh7" name="author" />                                                         
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" />
    <link href="img/favicon.png" rel="SHORTCUT ICON" />                                                            
    <title>Music*boX v.3 :: accueil</title><script type="text/javascript"t src="js/smoothscroll.js"></script>
  </head>
<body>
    <a name="top"></a>

    <div id="global">

<div id="header">
</div>
<div id="MainMenu">
	<div id="tab">
		<ul>
			<li class="item_active"><a href="index.php"><span>Accueil</span></a></li>
			<li><a href="#"><span>About</span></a></li>
			<li><a href="#"><span>Contact</span></a></li>

		</ul>
	</div>
</div>
        <div id="center">
            <div id="left">
                <div class="leftboxes">
    <h3>Item</h3>
</div>
<div class="leftboxes">

    <h3>Item</h3>
</div>
<div class="leftboxes">
    <h3>Item</h3>
</div>            </div>
            <div id="right">
            </div>
            <div class="spacer">
            </div>

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

Code : Tout sélectionner

html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: white;
}

/* ELEMENTS PRINCIPAUX */

#global {
	background-color: transparent;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	padding-bottom: 10px;
	height: 100%;
	width: 900px;
}

#header {
	background-color: transparent;
	background-image: url(../img/mb.png);
	background-repeat: no-repeat;
	display: block;
	margin: 0;
	padding: 0;
	height: 100px;
}

#center {
	background-color: transparent;
	display: block;
	margin: 0;
	margin-top: 20px;
	padding: 0;
	padding-bottom: 3px;
}

#left {
	background-color: transparent;
	display: block;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	float: left;
	width: 220px;
	text-align: center;
	padding: 5px;
	padding-top: 0px;
	padding-bottom: 2px;
}

.leftboxes {
	display: block;
	height: 40px;
	border: 2px solid #2d2e30;
	padding-top: 0px;
	margin-bottom: 5px;
}

.leftboxes ul {
	text-align: left;
	color: white;
	margin-left: 14px;
}

.leftboxes li {
	list-style-type: katakana;
}

.leftboxes h3 {
	display: block;
	background-color: #232425;
	margin: 2px;
	margin-bottom: 4px;
	text-align: center;
	font-weight: bold;
	border: 1px solid #4c4e50;
}

#right {
	background-color: transparent;
	margin-left: 230px;
	margin-top: 5px;
	margin-right: 5px;
	padding-top: 0px;
	padding: 3px;
	display: block;
	height: auto;
	min-height: 200px;
	border: 1px solid #2d2e30;
}

#footer {
	background-color: transparent;
	display: block;
	margin: 0;
	padding: 0;
	height: 30px;
	border-top: 1px solid #2d2e30;
}

.spacer {
	clear: both;
}

/* MENU */
#MainMenu 
{
	height: 20px;
	background-image: url(../images/bg_052.gif);
	margin: 0;
	border: 0;
}
#tab 
{
	margin:0;
	top:0;
}
#tab ul 
{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}
#tab li 
{
display:inline;
	float:left;
	margin:0;
	padding:0;
}
#tab a 
{
	background:#000000 url("../images/bright_052.gif") no-repeat right top;
	margin:0;
	padding:0;
	text-decoration:none;
	border:0;
	display:block;
	float:left;
}
#tab a span 
{
	display:block;
	background:url("../images/bleft_052.gif") no-repeat left top;
	padding:0 15px 0 35px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11;
	color:#C2C2C2;
	font-weight:bold;
	line-height:20px;
}
#tab a:hover,#tab li.item_active a 
{
	background-position:right bottom;
	border-color:#FF9300;
}
#tab a:hover span,#tab li.item_active a span 
{
	background-position:left bottom;
	color:#FFFFFF;
	font-weight:bold;
	font-style:normal;
	text-decoration:none;
}

/* Eléments */

img {
	border: none;
}

img, a {
	outline: none;
}

hr {
	color: #2d2e30;
	height: 1px;
}

label {
display:block;
width:150px;
float:left;
}

fieldset {
	border: 1px solid #2d2e30;
}

Hello Arthur, merci de te pencher sur ma question!

J'ai pas dit que c'est un problème php, j'ai demandé si y avait une solution php...

Oui enfin, de la même façon qu'on résous rarement un problème d'informatique avec des solutions de garagistes, il est aussi rare de résoudre un problème de CSS en PHP

Pour ton problème essaye de supprimer les margin et padding de tes H3

Code : Tout sélectionner

h3 {
     margin:0px;
     padding:0px;
}

Pour l'instant les seuls h3 que j'ai sont:

Code : Tout sélectionner

.leftboxes h3 {
   display: block;
   background-color: #232425;
   margin: 2px;
   margin-bottom: 4px;
   text-align: center;
   font-weight: bold;
   border: 1px solid #4c4e50;
}

C'est des éléments enfants de .leftboxes qui est elle même enfant de #left... m'enfin, j'ai mis 0 margin et 0 padding pour ce h3, j'ai ajouté un h3 général avec les mêmes valeurs. Hé ben ça change rien!

Comme t'as pu le voir avec les captures d'écran c'est un problème d'affichage propre à ff3; donc j'en déduis que même en mettant bien les mains dans l'camboui css (ça fait pas trop garagiste comme expression) j'pourrai pas corriger ça.
Qu'en penses-tu? si tu as une solution je suis preneur!

Testé ma page avec Google Chrome, même problème d'affichage...

Comme t'as pu le voir avec les captures d'écran c'est un problème d'affichage propre à ff3; donc j'en déduis que même en mettant bien les mains dans l'camboui css (ça fait pas trop garagiste comme expression) j'pourrai pas corriger ça.

Si c'est un problème d'affichage, tu ne pourra le corriger QUE en modifiant le HTML ou le CSS vu que ce sont les 2 seules composantes qui interviennent pour l'affichage.
Après selon le moteur de rendu (IE, Mozilla/Gecko, Safari/Chrome/Webkit) il peut y avoir des différences d'interprétation et c'est à toi d'apporter des modifications pour uniformiser le rendu.

Qu'en penses-tu? si tu as une solution je suis preneur!

J'en pense que tu as un éditeur de code qui sent le moisi

Tu as des caractères invisibles aux endroits où tu as des problèmes de rendus...

Copie-colle mon code ci-dessous et tu ne devrais plus voir ce décalage.
Ce code est exactement le même que le tien en ayant supprimé les 4 caractères problématiques et en ayant intégré la CSS (juste pour tester, ressort là si tu veux)

<!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" lang="fr">                               
  <head>                                                         
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />                                                         
    <meta content="stefh7" name="author" />                                                         

<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: white;
}

/* ELEMENTS PRINCIPAUX */

#global {
   background-color: transparent;
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0;
   padding-bottom: 10px;
   height: 100%;
   width: 900px;
}

#header {
   background-color: transparent;
   background-image: url(../img/mb.png);
   background-repeat: no-repeat;
   display: block;
   margin: 0;
   padding: 0;
   height: 100px;
}

#center {
   background-color: transparent;
   display: block;
   margin: 0;
   margin-top: 20px;
   padding: 0;
   padding-bottom: 3px;
}

#left {
   background-color: transparent;
   display: block;
   margin-top: 0px;
   margin-bottom: 0px;
   position: relative;
   float: left;
   width: 220px;
   text-align: center;
   padding: 5px;
   padding-top: 0px;
   padding-bottom: 2px;
}

.leftboxes {
   display: block;
   height: 40px;
   border: 2px solid #2d2e30;
   padding-top: 0px;
   margin-bottom: 5px;
}

.leftboxes ul {
   text-align: left;
   color: white;
   margin-left: 14px;
}

.leftboxes li {
   list-style-type: katakana;
}

.leftboxes h3 {
   display: block;
   background-color: #232425;
   margin: 2px;
   margin-bottom: 4px;
   text-align: center;
   font-weight: bold;
   border: 1px solid #4c4e50;
}

#right {
   background-color: transparent;
   margin-left: 230px;
   margin-top: 5px;
   margin-right: 5px;
   padding-top: 0px;
   padding: 3px;
   display: block;
   height: auto;
   min-height: 200px;
   border: 1px solid #2d2e30;
}

#footer {
   background-color: transparent;
   display: block;
   margin: 0;
   padding: 0;
   height: 30px;
   border-top: 1px solid #2d2e30;
}

.spacer {
   clear: both;
}

/* MENU */
#MainMenu
{
   height: 20px;
   background-image: url(../images/bg_052.gif);
   margin: 0;
   border: 0;
}
#tab
{
   margin:0;
   top:0;
}
#tab ul
{
   margin:0;
   padding:0;
   list-style:none;
   float:left;
}
#tab li
{
display:inline;
   float:left;
   margin:0;
   padding:0;
}
#tab a
{
   background:#000000 url("../images/bright_052.gif") no-repeat right top;
   margin:0;
   padding:0;
   text-decoration:none;
   border:0;
   display:block;
   float:left;
}
#tab a span
{
   display:block;
   background:url("../images/bleft_052.gif") no-repeat left top;
   padding:0 15px 0 35px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11;
   color:#C2C2C2;
   font-weight:bold;
   line-height:20px;
}
#tab a:hover,#tab li.item_active a
{
   background-position:right bottom;
   border-color:#FF9300;
}
#tab a:hover span,#tab li.item_active a span
{
   background-position:left bottom;
   color:#FFFFFF;
   font-weight:bold;
   font-style:normal;
   text-decoration:none;
}

/* Eléments */

img {
   border: none;
}

img, a {
   outline: none;
}

hr {
   color: #2d2e30;
   height: 1px;
}

label {
display:block;
width:150px;
float:left;
}

fieldset {
   border: 1px solid #2d2e30;
}
</style>
    <title>Music*boX v.3 :: accueil</title><script type="text/javascript" src="js/smoothscroll.js"></script>
  </head>
<body>
    <a name="top"></a>

    <div id="global">

<div id="header">
</div>
<div id="MainMenu">
   <div id="tab">
      <ul>
         <li class="item_active"><a href="index.php"><span>Accueil</span></a></li>
         <li><a href="#"><span>About</span></a></li>
         <li><a href="#"><span>Contact</span></a></li>

      </ul>
   </div>
</div>
        <div id="center">
            <div id="left">
                <div class="leftboxes">
    <h3>Item</h3>
</div>
<div class="leftboxes">

    <h3>Item</h3>
</div>
<div class="leftboxes">
    <h3>Item</h3>
</div>            </div>
            <div id="right">
            </div>
            <div class="spacer">
            </div>

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

Yes je teste ça de suite! mais c'est quoi cette histoire d'éditeur moisi? c'est pspad en l'occurence...
j'ai déjà eu ce genre de bug avec lui, uniquement depuis que je l'utilise sous vista, mais là j'y avais pas pensé.

Edit:

bon j'ai testé ton code, effectivement ça marche puisque y a que du html (pas d'include); je l'ai collé puis édité (dans notepad++) en ajoutant une include et j'ai encore le même problème... Pourtant logiquement je devrais avoir aucun caractère invisible! Si il y en a, et si ça vient de ça, comment les afficher et les supprimer?

Je suis blasé :/ pourquoi ça marche pas?!

M'enfin, encore merci d'avoir regardé ça!!

Edit2:

j'ai ouvert dans notepad++ tous mes fichiers inclus (utf-8 à la base) puis les ai converti en utf-8 sans BOM...
Problème résolu!!!!

Forum d'entraide PHPFrance

Firefox 3, includes et sauts de ligne non voulus

Firefox 3, includes et sauts de ligne non voulus