28172 sujets

CSS et mise en forme, CSS3

Css et safari

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 upload/27857-errsaf.jpg

merci d'avance
Bonjour et bienvenue Smiley cligne
sans la totalité du code ou mieux une page en ligne, il va être difficile de te répondre.
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 à:


[b]Code test[/b]
$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>";

[b]code en ligne[/b]
<?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)
Bonjour et bienvenue parmi nous Smiley 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. Smiley 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 Smiley smile

upload/1-code.gif
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 Smiley 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
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. Smiley cligne
Modifié par Florent V. (14 Mar 2010 - 21:36)
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)
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
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)?
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=css]
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)
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
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 Smiley cligne )
upload/579-diventrop.jpg
Sinon, ça n'a rien à voir avec le sujet mais me semble utile : il y a trois fautes dans le menu.
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
Sujet clos
Aller à