Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Css et safari
Auteur
rover
# 12 Mar 2010 - 11:29:51
Citer
14 Posts
 Bonjour

Je crée un site pour un de mes clients et j'ai le problème suivant.
L'affichage d'une page précise est décalé lors de l'affichage par Safari alors qu'avec IE, Opera et Mozilla tout est bon.

J'ai contrôle mon code html, php et css il semble ne pas y avoir d'erreurs.

Le problème vient apparemment du fait qu'un tableau est contenu dans une balise DIV.
J'ai réduit le tableau à sa plus simple expression pour faire un test, le probléme persiste

Si quelqu'un pouvait me tuyauter previews/27857-errsaf.jpg

merci d'avance
www.roverphoto.be 
^
Hermann
# 12 Mar 2010 - 11:33:15
Citer
4045 Posts
 Bonjour et bienvenue cligne
sans la totalité du code ou mieux une page en ligne, il va être difficile de te répondre.
^
rover
# 12 Mar 2010 - 12:17:21
Citer
14 Posts
 voici la page en ligne
http://espace.webitbe.eu/acc.php?page=9

et le css

http://espace.webitbe.eu/espace.css


Pour info le code php contenu dans la balise <div id="frame"> mais le problème est le même si ce code se reduit à:



Code test

$display2 .= "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";

    $display2 .= "<tr><td><img src=\"../../images/spacer.gif\" alt=\"\" width=\"28\" height=\"20\" /></td><td colspan=\"6\" class=\"fuscialow\"> TEST</td></tr></table>";



code en ligne

<?php

function refgen()

{

    global $display2;

    global $tabref;

    global $page;

    global $ref;

    global $tab;

    $a = 1;

	// Mise à zéro de la table temporaire

    mysql_query('DELETE FROM `temp`');

    mysql_query('ALTER TABLE `temp` pack_keys=0 checksum=0 delay_key_write=0 auto_increment=1');

    //**

	//  Création du tableau en ligne

	$display2 .= "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";

    $req = mysql_query("SELECT id , groupe , titre , city , annee , libel , archi , mat FROM ref order by groupe ") or die('Erreur SQL870101 !' . mysql_error());

    while (($res = mysql_fetch_row($req))) {

        $tabref[$tab] = $res0;

        $tab = $tab + 1;

        $idref = $res[0];

        $groupe = $res[1];

        $titre = $res[2];

        $city = $res[3];

        $annee = $res[4];

        $libel = $res[5];

        $archi = $res[6];

        $mat = $res[7];

        $pict = "ref/ref_$idref";

        $pict .= "_1.jpg";

    	//Alimentation de la table temporaire

        if (file_exists("$pict")) {

            $sql = "INSERT INTO `temp` ( `id` , `ref`) VALUES (  '', '$idref');";

            mysql_query($sql) or die('Erreur SQL81145 !' . mysql_error());

        }

    	//**

        $req1 = mysql_query("SELECT id,nom1 FROM groupe where id = $res[1] ") or die('Erreur SQL867 !' . mysql_error());

        while ($res1 = mysql_fetch_row($req1)) {

            $marque = $res1[1];

        }

        if (file_exists("$pict")) {

            if ($groupe != $testgroupe) {

                $a = 1;

                $display21 = "<tr><td><img src=\"../../images/spacer.gif\" alt=\"\" width=\"28\" height=\"30\" /></td><td valign=\"middle\" colspan=\"6\" class=\"Style1\">$marque</td></tr>";

            } else {

                $display21 = "<tr><td><img src=\"../../images/spacer.gif\" alt=\"\" width=\"28\" height=\"20\" /></td><td valign=\"middle\" colspan=\"6\" class=\"fuscialow\"> </td></tr>";

            }

            $testgroupe = $groupe;

            if ($a == 1) {

                $display2 .= $display21;

                $display2 .= "<tr><td><img src=\"../../images/spacer.gif\" alt=\"\" width=\"28\" height=\"20\" /></td><td valign=\"bottom\"><a href=\"acc.php?ref=$idref\" target=\"_self\"><img src=\"../../$pict\" width=\"195\" border =\"0\" alt=\"\" /></a><br /><span class=\"Style2\">$titre</span><br /><span class=\"Style2\">$city</span></td>";

                $a = $a + 1;

            } elseif (($a > 1) and ($a < 3)) {

                $display2 .= "<td><img src=\"../../images/spacer.gif\" alt=\"\" width=\"28\" height=\"20\" /></td><td valign=\"bottom\"><a href=\"acc.php?ref=$idref\" target=\"_self\"><img src=\"../../$pict\" width=\"195\" border =\"0\" alt=\"\" /></a><br /><span class=\"Style2\">$titre</span><br /><span class=\"Style2\">$city</span></td>";

                $a = $a + 1;

            } elseif ($a == 3) {

                $display2 .= "<td><img src=\"../../images/spacer.gif\" alt=\"\" width=\"28\" height=\"20\" /></td><td valign=\"bottom\"><a href=\"acc.php?ref=$idref\" target=\"_self\"><img src=\"../../$pict\" width=\"195\" border =\"0\" alt=\"\" /></a><br /><span class=\"Style2\">$titre</span><br /><span class=\"Style2\">$city</span></td></tr>";

                $a = $a + 1;

            } elseif ($a > 3) {

                $display2 .= $display21;

                $display2 .= "<tr>";

                $a = 1;

                $display2 .= "<td><img src=\"../../images/spacer.gif\" alt=\"\" width=\"28\" height=\"20\" /></td><td valign=\"bottom\"><a href=\"acc.php?ref=$idref\" target=\"_self\"><img src=\"../../$pict\" width=\"195\" border =\"0\" alt=\"\" /></a><br /><span class=\"Style2\">$titre</span><br /><span class=\"Style2\">$city</span></td></tr>";

                $a = $a + 1;

            }

        }

    }

    $display2 .= "<tr><td><img src=\"../../images/spacer.gif\" alt=\"\" width=\"28\" height=\"20\" /></td><td colspan=\"6\" class=\"fuscialow\"></td></tr></table>";

} ?>

Modifié par rover (12 Mar 2010 - 13:55)
www.roverphoto.be 
^
Laurie-Anne
# 12 Mar 2010 - 13:17:10
Citer
Modérateur
5736 Posts
 Bonjour et bienvenue parmi nous smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation smile

previews/1-code.gif
Non !
http://laurie-anne.bourdain.name 
^
Aureance
# 13 Mar 2010 - 21:59:24
Citer
Bonjour.
482 Posts
 Bonjour,
Dans un premier temps il serait pratique que tu mettes des sauts de ligne "\n" dans ton php ; ça produirait un code source qu'on (et pour toi aussi) puisse analyser avec plus d'aisance.
La bonne méthode : le HTML entre guillemets simples évite d'échapper tous les doubles quotes et fait gagner en rapidité de traitement par php. Concaténation et guillemets doubles pour indiquer les "\n" les "\r" ou les "\t". Comme ceci :
$display2 .= '<tr>'."\n".'<td>'."\n".'<img src="../../images/spacer.gif" alt="" width="28" height="20" />'."\n".'</td>'."\n".'<td colspan="6" class="fuscialow">'."\n".'</td>'."\n".'</tr>'."\n".'</table>'."\n" ;

Après avoir copié et re-indenté ton source (merci Tidy cligne ) ; en refermant les ensembles autonomes, je vois juste après la table qui se déplace vers la droite : deux fins de div qui ne semblent pas avoir de début. Le problème vient peut-être de là…

upload/579-fin-divs.jpg
Forums : Les gens pressés lisent en diagonale et répondent de travers.
aim 
^
fvsch
# 14 Mar 2010 - 21:35:12
Citer
Administrateur
19941 Posts
 Bonjour,

Je trouve que demander un coup de main sur un problème de rendu alors qu'on n'a pas pris la peine de vérifier que le code HTML est valide (et donc, entre autres, qu'il n'y a pas des balises manquantes ou en trop...), c'est un peu fort de café.

Ou, au moins, c'est manquer cruellement de méthodologie. cligne
Modifié par Florent V. (14 Mar 2010 - 21:36)
C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
http://fvsch.com 
^
rover
# 15 Mar 2010 - 00:52:18
Citer
14 Posts
 Merci à Aureance et à tout ceux qui ont jeté un coup d'oeil sur mon problème.

J'ai revérifié, toutes les balises ouvertes sont bien fermées, mais en fait il maquait une div complète dans laquelle devait s'intégrer le tableau. Mon problème semble donc résolu

Pour répondre à ce Florent V.
Je trouve qu'émettre un jugement sans avoir lu l'entièreté du courrier est une perte de temps ou alors c'est un moyen de combler sa solitude...
J'avais pris la peine avant de poster ma question, de vérifier mon code (comme précisé dans ma question initiale) en interne et via w3.

Je lui conseille donc de continuer à boire du café fort et de poursuivre ses publications de réponses aussi constructives.

Mais il est probable que si tout le monde avait ses compétences, ce forum n'aurait aucune raison d'être.
Modifié par rover (15 Mar 2010 - 01:17)
www.roverphoto.be 
^
Laurie-Anne
# 15 Mar 2010 - 08:30:31
Citer
Modérateur
5736 Posts
 Et pourtant tu as bien une erreur de balise mal fermée, ce qui cause très souvent ce genre de problèmes...

Mais bon c'est pas pour 6 erreurs de code que la page n'est plus valide... Si ?
Non !
http://laurie-anne.bourdain.name 
^
rover
# 15 Mar 2010 - 09:45:55
Citer
14 Posts
 merci Laurie-Anne

voila, j'ai même corrigé les erreurs signalées mais elles ne devaient pas avoir d'influences sur le rendu.

tout semble ok sauf les hauteur de div automatiques
www.roverphoto.be 
^
fvsch
# 15 Mar 2010 - 19:44:21
Citer
Administrateur
19941 Posts
rover a écrit :
voila, j'ai même corrigé les erreurs signalées mais elles ne devaient pas avoir d'influences sur le rendu.

Les erreurs d'imbrication ou de fermeture d'élément cause souvent des problèmes de rendu. Un </div> manquant ou en trop peut exploser un design, parfois dans seulement certains navigateurs.

En l'occurrence, avec ce code valide, je n'ai pas de problème de rendu dans Chrome (qui, comme Safari, utilise Webkit). Le problème persiste-t-il dans Safari, et si oui dans quelle(s) version(s)?
C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
http://fvsch.com 
^
rover
# 15 Mar 2010 - 21:30:16
Citer
14 Posts
 Bonsoir
Tout fonctionne bien et avec tous les browsers et il ne semble plus avoir d'erreur dans le code.

Mon seul soucis est le css (je débute) je n'arrive pas à faire varier automatiquement la hauteur d'une <div> en fonction d'une autre <div> contenue dans la première.

Toujours la même page :
http://espace.webitbe.eu/acc.php?page=9

Vue avec IE ok, avec les autres la <div> acc (pourpre) ne grandi pas

La <div>div#acc contient toutes les suivantes
div#logo - div#bandeau
div#acc1 - div#titre9
- div#corps

la div#corps devrait modifier la hauteur de la div#acc


code 


div#acc { 

width : 1023px; 

z-index : 1; 

background-color : #7b1016; 

color : inherit; 

height : auto; 

min-height : 666px;

margin-top : 0; 

margin-right : auto; 

margin-left : auto; 

position : relative; 

} 

div#logo { 

width : 221px; 

height : 104px; 

background-color : #ffffff; 

background-image : url(images/logo.jpg); 

position : relative; 

color : inherit; 

float : left;

} 

div#bandeau { 

width : 802px; 

height : 104px; 

float : left; 

position : relative;

} 

div#acc1 { 

font-family : Verdana, Arial, Helvetica, sans-serif; 

height : auto; 

min-height : 746px;

width : 221px; 

background-color : #7b1016; 

position : relative; 

left : 0; 

top : 0; 

color : inherit; 

float : left;

} 

div#titre9 { 

height : 40px; 

width : 802px; 

background-color : #ffffff; 

position : relative; 

left : 0; 

top : 0; 

color : inherit; 

float : left; 

} 

div#corps { 

font-family : Verdana, Arial, Helvetica, sans-serif; 

background-color : #ffffff; 

text-align : left; 

font-size : 12px; 

float : left; 

height : auto; 

min-height : 666px; 

width : 580px; 

position : relative; 

color : inherit; 

z-index : 1; 

}

Modifié par rover (15 Mar 2010 - 21:53)
www.roverphoto.be 
^
gc-nomade
# 15 Mar 2010 - 21:56:55
Citer
gcyrillus en mode portable
789 Posts
 Bonjour,


ajoute a #acc : overflow:hidden; par exemple qui aura comme incidence de ne pas laisser les elements flottant deborder . Il y a d'autre moyens pour obtenir ce resultat (comme un dernier element dans le flux et en clear ).

GC
GC rien , mais GC encore ... et ça marche via la V.A.E. je passe d'un B.E.P. a un B.T.S. ... ce qui apparemment ne flatte que mon ego !?
Je vois le monde de ma porte, pas vous ?
http://yidille.free.fr/plux/valign 
^
Aureance
# 15 Mar 2010 - 22:38:52
Citer
Bonjour.
482 Posts
rover a écrit :
Tout fonctionne bien et avec tous les browsers et il ne semble plus avoir d'erreur dans le code.
Je vois toujours ces deux fins de div inutiles qui, bien qu'elles ne posent pas de problème à la validation, sèmeraient leur zone de manière certaine si elles étaient placées plus en amont.
J'en suis certain car mon éditeur de texte ne peut me tromper : si je lui demande "ferme les blocs" il ferme les blocs ! S'il traîne quelque chose, je le vois tout de suite.
Pour reprendre la bonne suggestion de gc-nomade, tu pourrais par exemple transformer ces 2 </div></div> par un bloc vide <div style="clear:both"></div>
Les fins de div en question figurent en rouge sur cette image du code… toujours pas indenté… (t'aurais pas une petite flemme cligne )
previews/579-diventrop.jpg
Sinon, ça n'a rien à voir avec le sujet mais me semble utile : il y a trois fautes dans le menu.
Forums : Les gens pressés lisent en diagonale et répondent de travers.
aim 
^
rover
# 16 Mar 2010 - 03:20:10
Citer
14 Posts
 Voila j'ai un peu bossé.

Mais il n'y a aucune </div> de trop. J'ai marqué toutes les id qu'elles ferment. Ces balises sont ouvertes dans des includes.

Merci à gc-nomade, ça fonctionne maintenant
www.roverphoto.be 
^
Le sujet est clos.
Aller à