Problème d'affichage sous Safari

Bonjour j'ai un problèem d'affichage de la page sous safari et les anciennes versions de fiorefox apparament .

les news sont affichés horizontalement et non vertacalement a partir de la seconde

j'ai du mal a comprendre d'ou peux venir le problème

voici le lien direct:

http://www.premiumorange.com/valberg/?pg=news_read

merci beaucoup

voici l'extrait du code :

foreach($news->GetArticlesParDateDesc($_GET["debut"],$_GET["fin"]) as $article)
{
	if ($article->getEstImportant()) {$classe_titre="news_speciale_titre";$classe_corps="news_speciale_corps ";$PreTitre="IMPORTANT : ";} else {$classe_titre="news_standard_titre";$classe_corps="news_standard_corps ";$PreTitre="";};

	echo("<!-- DEBUT ARTICLE -->\n");
	echo("<div id=\"news".$article->getNumeroNews()."\"  class=\"".$classe_corps."\">\n

	 <div class=\""."$classe_titre"."\">\n
	 <span  class=\"style_standard_blanc\" style=\"float: left\">".utf8_decode($PreTitre.$article->getTitreNewsUTF8())."</span>\n
	 <span class=\"style_standard_blanc\" style=\"float: right\">".$article->getDateNews()."</span>\n
	 </div>\n
	 <span class=\"style_standard_noir\">".utf8_decode($article->getContenuNewsUTF8())."</span>\n
	 </div>\n
	 <div style=\"background-color:transparent; visibility:visible; width:95%; height:40px; float:left; overflow:hidden;\">\n
	 </div>\n");
	echo("<!-- FIN ARTICLE -->\n");
} 

Modifié par olivier2nissa (22 Jun 2009 - 23:56)

le fichier CSS

.news_standard_corps {background-color:white; width:95%; height:160px; overflow:auto;z-index: 10;margin-right:auto;margin-left:auto;}
.news_standard_titre {background-color:rgb(51,153,204); width:100%; height:20px; float:left;}

.news_speciale_corps {background-color:white; width:95%; height:160px; overflow:auto;z-index: 10;margin-right:auto;margin-left:auto;}
.news_speciale_titre {background-color:red;width:100%; height:20px; float:left;}

le rendu HTML

<!-- DEBUT ARTICLE -->
<div id="news19"  class="news_standard_corps ">
 
 
	 <div class="news_standard_titre">
 
	 <span  class="style_standard_blanc" style="float: left">testback</span>
 
	 <span class="style_standard_blanc" style="float: right">2009-06-18</span>
 
	 </div>
 
	 <span class="style_standard_noir">backback</span>
 
	 </div>
 
	 <div style="background-color:transparent; visibility:visible; width:95%; height:40px; float:left; overflow:hidden;">
 
	 </div>
<!-- FIN ARTICLE -->
<!-- DEBUT ARTICLE -->
<div id="news17"  class="news_standard_corps ">
 
 
	 <div class="news_standard_titre">
 
	 <span  class="style_standard_blanc" style="float: left">TEST</span>
 
	 <span class="style_standard_blanc" style="float: right">2009-06-09</span>
 
	 </div>
 
	 <span class="style_standard_noir">ché<br />
<br />
<br />
<br />
héhé</span>
 
	 </div>
 
	 <div style="background-color:transparent; visibility:visible; width:95%; height:40px; float:left; overflow:hidden;">
 
	 </div>
<!-- FIN ARTICLE -->
<!-- DEBUT ARTICLE -->
<div id="news18"  class="news_standard_corps ">
 
 
	 <div class="news_standard_titre">
 
	 <span  class="style_standard_blanc" style="float: left">QQ</span>
 
	 <span class="style_standard_blanc" style="float: right">2009-06-09</span>
 
	 </div>
 
	 <span class="style_standard_noir">hé <br />
é</span>
 
	 </div>
 
	 <div style="background-color:transparent; visibility:visible; width:95%; height:40px; float:left; overflow:hidden;">
 
	 </div>
<!-- FIN ARTICLE -->
<!-- DEBUT ARTICLE -->
<div id="news15"  class="news_standard_corps ">
 
 
	 <div class="news_standard_titre">
 
	 <span  class="style_standard_blanc" style="float: left">test Q</span>
 
	 <span class="style_standard_blanc" style="float: right">2009-06-07</span>
 
	 </div>
 
	 <span class="style_standard_noir">MAX Q</span>
 
	 </div>
 
	 <div style="background-color:transparent; visibility:visible; width:95%; height:40px; float:left; overflow:hidden;">
 
	 </div>
<!-- FIN ARTICLE -->
<div style="background-color:transparent; width:95%; height:40px; float:left; overflow:hidden;">
<span  class="style_standard_blanc" style="float: left"></span>
<span class="style_standard_blanc" style="float: right"></span>

Salut,

hum... pour commencer ton code est difficile à lire : pourquoi ne pas avoir mis tout le code css dans le fichier externe au lieu d'en renseigner la plus grande partie directement au niveau des éléments avec un attribut style ?

Pour ton problème ça irait beaucoup mieux en supprimant les lignes

<div style="background-color:transparent; visibility:visible; width:95%; height:40px; float:left; overflow:hidden;"></div>

Si je ne m'abuse elles ne servent qu'à créer une marge entre tes DIV... or la propriété css margin sert justement à ça. Petite précision : background-color:transparent et visibility:visible sont inutiles puisqu'il s'agit déjà des valeurs par défaut de ces 2 propriétés.


Au passage :
* ta page contient un caractère incorrectement encodé ce qui fait qu'on ne peut pas vérifier directement la validité du code. Il faut donc copier / coller le code html généré dans le formulaire approprié pour connaître les erreurs.
* ton document n'est absolument pas structuré (je pense notamment à l'absence de titres). Voir cet article sur openweb : Respecter la sémantique XHTML. Pour rappel il existe d'autres éléments html que DIV et SPAN.
* lorsqu'on désactive les images presque tout le contenu disparaît : il faudrait penser à rajouter un background-color différent de la couleur du texte en plus du background-image.
* ...
Modifié par Heyoan (23 Jun 2009 - 08:10)