Error sous IE, mauvais fond sous Safari, OK sous fire fox???

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
fentuz
Arias
Messages : 6
Inscription : 25 janv. 2006, 22:02

Error sous IE, mauvais fond sous Safari, OK sous fire fox???

Message par fentuz »

salut,

j'essaie de faire un site avec du CSS et de script Java... http://fentuz.ifrance.com

utilisant NVU comme editeur de code, j'ai presque tout ecrit via l'editeur... les images ont ete mise a l'arrache.... :oops: et come j'oublie vite la syntaxe des codes... :cry:

Bref, Sous firefox, ca semble OK, en Local, pas de pb avec les script java (sur site, 2 rapports d'error lies a l'hebergeur. :shock:
Safari, le fond du tableau est bof... blanc au lieu de c0c0c0 :x
IE rapports de erreurs mais affiche les pages... :roll:

Sur W3.org, J'ai : "no attribute "CELL§§§§". " comme errors... :?: :? :?:

Code : Tout sélectionner

table style="text-align: left; width: 800px;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td colspan="2" rowspan="1"
 style="width: 800px; height: 100px; vertical-align: middle;"
 border="0px" cellpadding="0px" cellspacing="0px"
 background="Graphism/top.jpg"> 
Bref, deja que les script java, j'ai du mal mais la, j'ai beau chercher... :? :(

'aven't got a clue....

Si vous avez des idees....

Sinon ben il va falloir se mettre au full CSS... Et j'ai pas trop le tps, car c'est qu'un hobby... :roll:

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

Pfou...!! Ben y a beaucoup de choses à changer.
Pour commencer l'erreur que tu signales (entre parenthèses il y en 26 sur le valideur W3C) c'est que cellspacing et cellpadding n'existent pas. Cellspacing c'est l'espace entre les cellules donc autrement dit la marge. Remplaces par margin:0. Cellpadding c'est l'espace dans ta cellule entre le texte et le bord de la cellule, aujourd'hui ça se note padding tout court donc remplaces par padding:0. (margin et padding sont à incorporer dans style="...")
Les autres erreurs :
  • Le doctype doit être avant toute chose, y compris ton javascript.

    C'est d'ailleurs une erreur d'utiliser javascript pour créer des cadres auxquels tu mets déjà un doctype. :P Conséquence directe : tous ceux qui ont javascript désactivé ne verront pas ta pub. C'est pas que ça me dérange mais bon. :roll: Il te faut créer une page avec uniquement

    Code : Tout sélectionner

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" '+
      '"http://www.w3.org/TR/html4/frameset.dtd"><html><head><title></title></head>'+
      '<frameset rows="88,1*" frameborder=0 border=0 framespacing=0>'+
      '<frame src="'+p+'" marginwidth=0 marginheight=0 scrolling=no noresize name=pub>'+
      '<frame src="'+a+'" marginwidth=0 marginheight=0 scrolling=auto noresize></frameset></html>
    (en supprimant les ' et + évidemment) puis une page avec le javascript de pub qui viendra se mettre dans la première frame et enfin les autres pages de ton site qui se logeront dans la deuxième frame.

    Pareillement il ne doit rien y avoir après le </html>. Mets ton script juste avant.

    Ton doctype transitional est d'ailleurs incomplet. Pour le framset tu as une partie "http://www.w3.org/TR/html4/frameset.dtd". Et bien il existe un équivalent pour le transitional.

    Tu n'as pas indiqué la langue de tes pages <html> -> <html lang='en'> ou <html lang='fr'>.

    Quant tu mets un chiffre de grandeur à une propriété css, comme margin:2, tu dois préciser l'unité parce qu'après tout ça pourrait être 2px mais aussi 2pt, 2em, 2%, 2choux-fleurs, 2escalopes, 2voitures, etc...

    color : grey à éviter. C'est peut être la cause de l'erreur pour Safari. -> color:#808080
Bon courage.
fentuz
Arias
Messages : 6
Inscription : 25 janv. 2006, 22:02

Message par fentuz »

oui, ca marche mieux comme ca mais Ya tjrs ca
Below are the results of attempting to parse this document with an SGML parser.

1. Error Line 135 column 133: there is no attribute "BACKGROUND".

... vertical-align: middle;" background="graphism/top.jpg">&nbsp;&nbsp;
c'est dans ce code:

Code : Tout sélectionner

<td colspan="2" rowspan="1"
 style="margin: 0px; padding: 0px; width: 800px; height: 100px; vertical-align: middle;"
 background="graphism/top.jpg">

j'essaie de mettre un truc comme ca....

Code : Tout sélectionner

<td colspan="2" rowspan="1"
 style="margin: 0px; padding: 0px; width: 800px; height: 100px; vertical-align: middle; background-image:url("graphism/top.jpg");">
Et non, rien :?: :?: :?: , je seche sur cette derniere erreur


Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2


Voici le code original, Je comprends pas comment mais ifrance cree des erreurs de + avec ses script...

Code : Tout sélectionner

!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Fentuz' Roadster</title>
  <script type="text/javascript"><!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
  </script>
  <style type="text/css">
<!--
body {
background: white;
padding:0;
margin:2;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: black;
}
h1{
font-family: verdana, arial, sans-serif;
font-size: 32px;
font-style:italic;
font-weight:normal;
color:#c0c0c0 ;
}
h2{
font-family: verdana, arial, sans-serif;
font-size: 24px;
font-style:italic;
font-weight:normal;
color:#3169c6 ;
margin: 15px;
}
p{
font-family: verdana, arial, sans-serif;
font-size: 12px;
font-style:normal;
font-weight:normal;
color:black ;
margin: 10px;
text-align: justify
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 10px;
left: 10px;
width: 120px;
color: rgb(192, 192, 192);
font-size: 12px
}
#menu dt {
cursor: pointer;
background: #326ac7;
height: 20px;
line-height: 20px;
margin: 15px;
border: 1px solid gray;
text-align: left;
font-weight: normal;
color: rgb(192, 192, 192);
}
#menu dd {
position: absolute;
z-index: 100;
left: 106px;
margin-top: -22px;
width: 95px;
background: #3169c6;
border: 1px solid gray;
color: rgb(192, 192, 192);
}
#menu ul {
padding: 2px;
}
#menu li {
text-align: left;
font-size: 10px;
height: 18px;
line-height: 18px;
color: rgb(192, 192, 192);
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
color: rgb(192, 192, 192);
}
#menu li a:hover {
text-decoration: underline;
color: #c0c0c0;
}
#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
-->
  </style>
</head>
<body>
<!--Top Band-->
<table style="border: medium none ; text-align: left; width: 800px;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td colspan="2" rowspan="1"
 style="margin: 0px; padding: 0px; width: 800px; height: 100px; vertical-align: middle;"
 background="graphism/top.jpg">&nbsp;&nbsp; <br>
      <h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp;
&nbsp;FENTUZ'
ROADSTER</h1>
      </td>
    </tr>
    <tr>
      <td
 style="margin: 0px; padding: 0px; height: 26px; width: 800px; background-color: rgb(192, 192, 192);"><span
 style="color: rgb(255, 255, 255);">&nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span
 style="font-family: Osaka;"> &nbsp;EUNOS ROADSTER S-Spec
&nbsp;1.6 &nbsp; 115bhp</span></span></td>
      <td
 style="height: 26px; width: 150px; text-align: right; background-color: rgb(192, 192, 192);"><small><a
 href="index_fr.htm">FR</a>
/ <a href="index.htm">EN</a>&nbsp;&nbsp;</small></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="1"
 style="margin: 0px; padding: 0px; width: 800px; height: 24px;"
 background="Graphism/bottom.gif"></td>
    </tr>
  </tbody>
</table>
<br>
<!--main band-->
<table style="text-align: left; width: 800px;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="width: 150px; height: 24px;"
 background="Graphism/menu.gif"></td>
      <td style="width: 150px; height: 24px;"> </td>
    </tr>
    <tr>
      <td style="width: 150px; background-color: rgb(192, 192, 192);"><!--menu Java -->
      <dl
 style="top: 195px; left: 14px; background-color: rgb(192, 192, 192);"
 id="menu">
        <dt><a href="index.htm">Home</a></dt>
        <dt><a href="mx5story.htm">MX5
Story</a></dt>
        <dt onmouseover="javascript:montre('smenu3');"
 onmouseout="javascript:montre();">Who's who</dt>
        <dd id="smenu3"
 onmouseover="javascript:montre('smenu3');"
 onmouseout="javascript:montre();">
          <ul>
            <li><a href="sspec.htm">NA S-Spec</a></li>
            <li><a href="fentuz.htm"> Fentuz </a></li>
          </ul>
        </dd>
        <dt onmouseover="javascript:montre('smenu4');"
 onmouseout="javascript:montre();">Galery</dt>
        <dd id="smenu4"
 onmouseover="javascript:montre('smenu4');"
 onmouseout="javascript:montre();">
          <ul>
            <li><a href="myruns.htm">My
Runs</a> </li>
            <li><a href="mx5ocruns.htm">MX5OC
Runs</a> </li>
            <li><a href="special.htm">Specials</a>
            </li>
            <li><a href="spitfire.htm">Spitfire</a>
            </li>
          </ul>
        </dd>
        <dt><a href="links.htm">Links</a></dt>
        <dt><a href="mailto:fentuz@caramail.com">Contact
me</a> </dt>
      </dl>
      </td>
      <td
 style="margin: 10px; width: 650px; height: 500px; vertical-align: top;"
 colspan="1" rowspan="2">
      <h2>Welcome to Fentuz' Roadster<br>
      </h2>
      <p>A website dedicated to my favorite sports car: <br>
      </p>
      <h1 style="text-align: center;">The MAZDA MX5</h1>
      <p>The MX-5 story can be found here, from the early
prototype in 1984 through to the latest models and how Mazda managed to
create a modern classic roadster.<br>
      </p>
      <p>It also includes various pictures of my cars (Eunos
Roadster and Triumph Spitfire), my runs, MX-5 owners club runs and
special MX5s.&nbsp;</p>
      <p style="text-align: center;"><img
 style="width: 381px; height: 201px;" alt="Black MX5"
 src="home/home.jpg"></p>
      </td>
    </tr>
  </tbody>
</table>
<br>
<div style="text-align: center;"><small>GK Design</small></div>
<br>
<br>
</body>
</html>
Dernière modification par fentuz le 15 avr. 2006, 21:22, modifié 1 fois.
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: Error sous IE, mauvais fond sous Safari, OK sous fire fo

Message par calimo »

fentuz a écrit :j'essaie de faire un site avec du CSS
Le problème, c'est que tu mélange mise en forme CSS et mise en forme "à l'ancienne" avec tableaux et balises ad hoc.
Le mélange des deux pose toujours des problèmes :?

Le mieux est de supprimer toute balise de mise en forme du code, et de tout faire en css :wink:
fentuz a écrit :et de script Java...
Tu ne voudrais pas plutôt parler de javascript ? C'est très différent de java :wink:

Attention à ce que la visualisation du site ne devienne pas dépendante de javascript. Ça doit rester un "plus", pas une nécessité.
En l'occurence, le menu déroulant est déroulé sans javascript (ce qui est très bien), mais malheureusement les divers sous-menus se chevauchent :? Donc tu devrais également gérer le positionnement par javascript et laisser les menus aller à la suite s'il est désactivé :wink:
SB
Varan
Messages : 1095
Inscription : 05 mars 2004, 18:38

Message par SB »

fentuz a écrit :oui, ca marche mieux comme ca mais Ya tjrs ca
Below are the results of attempting to parse this document with an SGML parser.
1. Error Line 135 column 133: there is no attribute "BACKGROUND".
... vertical-align: middle;" background="graphism/top.jpg">&nbsp;&nbsp;
j'essaie de mettre un truc comme ca....

Code : Tout sélectionner

<td colspan="2" rowspan="1"
 style="margin: 0px; padding: 0px; width: 800px; height: 100px; vertical-align: middle; background-image:url("graphism/top.jpg");">
Et non, rien :?: :?: :?: , je seche sur cette derniere erreur
L'idée est bonne, c'est ça qu'il te faut. Le problème vient juste des guillemets. Avec ta proposition le navigateur voit juste ça :

Code : Tout sélectionner

<td colspan="2" rowspan="1"
 style="margin: 0px; padding: 0px; width: 800px; height: 100px; vertical-align: middle; background-image:url("
Il s'arrête au premier guillemet et ce qui est après provoque une faute. Remplaces les double guillemets par des simples.

Code : Tout sélectionner

<td colspan="2" rowspan="1"
 style="margin: 0px; padding: 0px; width: 800px; height: 100px; vertical-align: middle; background-image:url('graphism/top.jpg');">
Et n'oublie pas mes autres conseils :

le doctype correct : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
la langue : <html lang='en'>
le css correct : margin:2px

Enfin si le javascript de pub t'es imposé par ifrance et que tu souhaites t'en passer (ce qui est peut être illégal selon l'accord qui te lie à eux) essaie à ton tour d'incorporer le script suivant dans tes pages entre <head> et </head>

Code : Tout sélectionner

<script type="text/javascript">
<!--
if (parent.frames.length!=0) 
parent.location.href=location.href 
//-->
</script>
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2
fentuz
Arias
Messages : 6
Inscription : 25 janv. 2006, 22:02

Message par fentuz »

SB a écrit :

Code : Tout sélectionner

<td colspan="2" rowspan="1"
 style="margin: 0px; padding: 0px; width: 800px; height: 100px; vertical-align: middle; background-image:url('graphism/top.jpg');">
Et n'oublie pas mes autres conseils :

le doctype correct : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
la langue : <html lang='en'>
le css correct : margin:2px

Enfin si le javascript de pub t'es imposé par ifrance et que tu souhaites t'en passer (ce qui est peut être illégal selon l'accord qui te lie à eux) essaie à ton tour d'incorporer le script suivant dans tes pages entre <head> et </head>

Code : Tout sélectionner

<script type="text/javascript">
<!--
if (parent.frames.length!=0) 
parent.location.href=location.href 
//-->
</script>
Merci, Ca y est, ca passe la validation en dur... parcompte, sur server... ben non mais bon, j'y suis pour rien... J'ai essaye le script et ca marche pas, Y a tout qui clignote.. (les pubs me derrangent pas puisque je vais les repertorier + tard...

La seule chose que j'arrive pas a placer, c'est la lang='EN'... NVU n'aime pas trop et l'efface automatiquement.

Question technique:

C'est qui la difference de guillemets??? ex: background-image: url("jkj;o.jpg"); et background-image: url('jkj;o.jpg');

Message envoyé avec : Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités