Incompatibilité avec Firefox et IE7

Bonjour à toutes et à tous,

Nouveau sur le forum, je suis également nouveau en utilisation des feuilles CSS.
J'aimerai vous soumettre les problèmes que je rencontre, en espérant que vous pourrez me donner un coup de main.

Le travail est sur cette page-là => http://www.saintaugustin-19.fr/Sto/index2.htm

Problème sur Firefox et IE7 :
- je n'arrive pas centrer le texte dans les cellules des menus

Problème sur Firefox :
- le fond vert de la colonne de gauche ne s'affiche pas au-dessus du blason

Problème sur IE7 :
- le fond blanc de la partie centrale ne s'affiche pas sur toute la hauteur de celle-ci

Je (re)précise (okazou ) que je débute ... soyez indulgents, mais je ne demande qu'à apprendre

Merci d'avance pour vos messages.
Modifié par Captain_ETC (18 Apr 2007 - 20:37)

Salut,

Comme tu es dans le salon CSS, tu dois te douter que la grande majorité des sujets ici (voire tous) traitent de "problèmes" et de "css".

Ton sujet va donc malheureusement vite se perdre dans la masse, tout simplement parce que tu ne donnes pas assez de précision dans ton titre
Merci d'éditer ton titre pour le rendre plus explicite par rapport à ton problème.

Hello

Mon dieu ce code...

- Tu utilises des tableaux pour structurer ton site (ce qui n'est sérieusement pas recommandé). Un peu de lecture :

Comparaison entre tableaux et standards
Construire un site sans tableaux

- Pour ton menu central tu utilises des balises div dans les cellules de ton tableau, ET dans ces balises des balises span, ET des classes associées à ces deux balises . Un conseil : mets en place un joli menu à l'aide d'une liste et d'items flottants.

Des menus simples en CSS

T'as déjà du boulot, ton site est facilement réalisable en CSS donc fais un peu de ménage dans tes pages (HTML et feuille de style) en virant tout ces tableaux et ces classes inutiles.

Bon courage
Modifié par BeliG (18 Apr 2007 - 10:15)

Bon j'ai pas grand chose à faire donc...

Au niveau de la structure de ta page, j'opterais pour la solution suivante :

Page HTML

<div id="global">

     <div id="banniere">

          <div id="langue">
          </div>

     </div>

     <div id="menu_pere">
          <ul>
               <li>Accueil
               </li>

               <li>Accès & Historique
               </li>

               ...
          </ul>
     </div>

     <div id="menu_fils">
     </div>

     <div id="contenu">
     </div>

     <div id="bas_de_page">
     </div>

</div>

CSS :

body {   
margin:0;
padding:0;
text-align: center; /* pour corriger le bug de centrage IE < 6 */ }

#global {
margin-left: auto; /* pour centrer ton design */
margin-right: auto;
text-align: left;
width: 735px; }

#banniere {
background:url(./Images/Skelet/titre.png) no-repeat; 
height:75px; }

#langue {
position:absolute;
right:20px; /* espace entre tes images et le bord droit de la bannière */
top:20px; /* espace entre tes images et le haut de la bannière */ }

#menu_pere ul {
list-style:none; /* masque l'affichage des puces */ }

#menu_pere li {
float:left; /* onglets alignés horizontalement en partant de la gauche */ }

#menu_fils {
float:left;
width:105px; }

#bas_de_page {
clear:both; /* retour à la ligne */ 
width:35px; }

Voilà, j'ai pas testé c'est écrit au feeling donc t'attends pas à ce que ça marche directe, sers toi du code plus comme une piste que comme solution

Merci pour vos réponses que je découvre à l'instant.
Je vais prendre le temps de les regarder en détail et de corriger mon code.
Dès que j'ai avancé de manière significative, je vous le fais savoir.

Ps : mon code a du vous paraitre bien naze ... mais je vais essayer de faire mieux

Bon, j'ai fait quelques modifs en suivant vos conseils et ça donne ça = http://www.saintaugustin-19.fr/Sto/
Par rapport à la réalisation ancienne ( http://www.saintaugustin-19.fr/Sto/.index.htm ), y' pas photo concernant le code, c'est bcp moins bordélique qu'avec les <table>.
Cela dit, pour commencer par là, comment dois-je modifier mon css pour avoir :
1- l'affichage de l'image de fond des boutons du menu
2- le changement d'image avec le hover
3- le centrage horizontal du menu
4- le positionnement des images "FF" et "UK" dans le titre

Merci d'avance, mes demandes doivent vous paraitre un peu débiles ... mais je crois que ce n'est qu'avec votre aide sur l'exemple du site que je vais pouvoir comprendre au fur et à mesure comment tout ça s'imbrique.


Modifié par Captain_ETC (19 Apr 2007 - 09:06)

a écrit :
1- l'affichage de l'image de fond des boutons du menu

Pourquoi utilises-tu une image (il n'y a aucun motif, dessin ou autre), une couleur de fond suffirait non ?

#menu_pere li {background-color:#... }

Tu peux choper la couleur de ton image avec l'outil pipette d'un logiciel de dessin, ou retrouves le code couleur via un site web.

Pour mettre en forme tes onglets regardes du côté des propriétés margin et padding, pour leur fixer une taille utilise width.

a écrit :

le positionnement des images "FF" et "UK" dans le titre

Comme ça, tout simplement :

<div id="langue">
     <img src="./Images/Skelet/langue_en.gif"/><img src="./Images/Skelet/langue_fr.gif"/>
</div>

Attention à ne pas mettre de retour à ligne (sinon tes images se placeront les unes en dessous des autres) !
Modifié par BeliG (19 Apr 2007 - 09:32)

BeliG a écrit :

Pourquoi utilises-tu une image (il n'y a aucun motif, dessin ou autre), une couleur de fond suffirait non ?

Il s'agit bien d'une image et non d'un fond color.
Image ON => http://www.saintaugustin-19.fr/Images/Skelet/bouton_on.png
Image OFF => http://www.saintaugustin-19.fr/Images/Skelet/bouton_off.png

Alors comme ça :

#menu_pere li {
background-image:url(./[b]img_off[/b]); }

Et pour les onglets actifs tu peux rajouter une class "active" par exemple pour placer ta seconde image :

#menu_pere li.active {
background-image:url(./[b]img_on[/b]); }

Modifié par BeliG (19 Apr 2007 - 09:38)

J'ai inséré mes images FF et UK mais elles se retrouvent en dehors de l'entête du site.
Par ailleurs, j'aimerai qu'elles soient espacées entre elles, est-ce possible ?

Autre question, a quoi correspond le menu_fils ?
Modifié par Captain_ETC (19 Apr 2007 - 09:44)

Captain_ETC a écrit :
Par ailleurs, j'aimerai qu'elles soient espacées entre elles, est-ce possible ?

Mets un &nbsp; (espace) entre les 2

Bon j'vais pas tout te faire non plus, j'ai du boulot aussi

J't'ai donné pas mal de pistes, à toi de te débrouiller un peu seul

Bon courage
Modifié par BeliG (19 Apr 2007 - 09:44)

BeliG a écrit :

Mets un &nbsp; (espace) entre les 2

Bon j'vais pas tout te faire non plus, j'ai du boulot aussi

J't'ai donné pas mal de pistes, à toi de te débrouiller un peu seul

Bon courage

Merci

Désolé, mais je ne comprends pas pourquoi mes boutons "langue" se positionnent par rapport au bord droit de la page et non par rapport au bord droit de mon <div> banniere .... et mon texte n'est toujours pas centré verticalement.
Modifié par Captain_ETC (19 Apr 2007 - 10:14)

#banniere {
...
position:relative; }

Essaye ça
Modifié par BeliG (19 Apr 2007 - 10:10)

Captain_ETC a écrit :
je ne comprends pas pourquoi mes boutons "langue" se positionnent par rapport au bord droit de la page et non par rapport au bord droit de mon <div> banniere

BeliG a écrit :

#banniere {
...
position:relative; }

Essaye ça

Merci

Encore le boulet (moi donc ... )
1- Pourquoi le menu horizontal n'est pas centré horizontalement et n'est pas acollé au <div top> ?
2- Pourquoi le texte dans le menu n'est pas centré verticalement ?
3- Pourquoi le changement d'image de fond avec le hover n'est pas "propre" sous Firefox et inopérant sous IE7 ?

URL de test => http://www.saintaugustin-19.fr/Sto/


Merci d'avance.
Modifié par Captain_ETC (19 Apr 2007 - 14:28)

Euh... comment te dire... tu n'as absolument rien fait par toi même (ou très très peu) depuis 9h45 ce matin... T'attends-tu à ce que je developpe ton site dans sa totalité ? Si c'est le cas laisse moi t'envoyer mon numéro de compte PayPal, tu effectueras un virement d'une somme convenue à l'avance par MP et seulement après je me charge de ton site

Ou autre possiblité (moins cher et très enrichissante d'un point de vue personnel), tu cherches un peu par toi même et viens demander de l'aide sur le forum pour résoudre tes problèmes les plus coriaces...

Captain_ETC a écrit :
Je (re)précise (okazou ) que je débute ... soyez indulgents, mais je ne demande qu'à apprendre

Le moment est venu... ça fait un peu mal à la tête au début mais on chope vite le rythme, bon courage
Modifié par BeliG (19 Apr 2007 - 14:40)

Me revoilà ...

Après quelques prises de chou (mais bon, faut bien en passer par là), je viens de faire mes 2 premières pages en XHTML.
Avant d'aller plus en avant et utiliser le source pour mes autres pages, je souhaite obtenir la certification XHTML 1.0.
Lorsque je passe mes pages à la "moulinette", j'ai 2 causes d'erreurs, que je n'arrive pas à éliminer.
La première concerne le code qui me permet de positionner l'image (UK ou FR) dans l'entête du site.
La seconde (qui génère plein de messages d'erreurs à elle seule) concerne l'utilisation d'une applet .class.

J'en appelle donc à votre précieuse aide pour me sortir de cette situation et comprendre le pourquoi du comment.

URL de ma page :
http://www.saintaugustin-19.fr/XHTML/ (l'accès à ma seconde page se fait par un clic sur le drapeau UK dans l'entête).

Erreurs empêchant la certification

a écrit :

1. Error Line 17 column 26: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag.

<div id="langue_uk">

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

&#9993;
2. Error Line 98 column 13: there is no attribute "CODE".

<APPLET CODE="watermessager.class" WIDTH=420 HEIGHT=60>

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

&#9993;
3. Error Line 98 column 41: there is no attribute "WIDTH".

<APPLET CODE="watermessager.class" WIDTH=420 HEIGHT=60>

&#9993;
4. Error Line 98 column 41: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.

<APPLET CODE="watermessager.class" WIDTH=420 HEIGHT=60>

&#9993;
5. Error Line 98 column 52: there is no attribute "HEIGHT".

<APPLET CODE="watermessager.class" WIDTH=420 HEIGHT=60>

&#9993;
6. Error Line 98 column 52: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified.

<APPLET CODE="watermessager.class" WIDTH=420 HEIGHT=60>

&#9993;
7. Error Line 98 column 54: element "APPLET" undefined.

<APPLET CODE="watermessager.class" WIDTH=420 HEIGHT=60>

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
* incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
* by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

&#9993;
8. Error Line 99 column 14: there is no attribute "NAME".

<PARAM NAME="demicron" VALUE="www.demicron.se">

&#9993;
9. Error Line 99 column 31: there is no attribute "VALUE".

<PARAM NAME="demicron" VALUE="www.demicron.se">

&#9993;
10. Error Line 99 column 48: element "PARAM" undefined.

<PARAM NAME="demicron" VALUE="www.demicron.se">

&#9993;
11. Error Line 100 column 34: element "PARAM" undefined.

<PARAM NAME="reg" VALUE="A00046">

&#9993;
12. Error Line 101 column 32: element "PARAM" undefined.

<PARAM NAME="delay" VALUE="50">

&#9993;
13. Error Line 102 column 38: element "PARAM" undefined.

<PARAM NAME="textdelay" VALUE="2000">

&#9993;
14. Error Line 103 column 35: element "PARAM" undefined.

<PARAM NAME="fontsize" VALUE="12">

&#9993;
15. Error Line 104 column 50: element "PARAM" undefined.

<PARAM NAME="item0" VALUE="Pour un week-end ...">

&#9993;
16. Error Line 105 column 55: element "PARAM" undefined.

<PARAM NAME="item1" VALUE="... pour vos vacances ...">

&#9993;
17. Error Line 106 column 74: element "PARAM" undefined.

.... venez vous ressourcer en pleine nature !">

&#9993;
18. Error Line 107 column 36: element "PARAM" undefined.

<PARAM NAME="font" VALUE="Verdana">

&#9993;
19. Error Line 108 column 41: element "PARAM" undefined.

<PARAM NAME="foreground" VALUE="629331">

&#9993;
20. Error Line 109 column 41: element "PARAM" undefined.

<PARAM NAME="background" VALUE="FFFFFF">

&#9993;
21. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

&#9993;
22. Info Line 109 column 2: start tag was here.

<PARAM NAME="background" VALUE="FFFFFF">

23. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

&#9993;
24. Info Line 108 column 2: start tag was here.

<PARAM NAME="foreground" VALUE="629331">

25. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

&#9993;
26. Info Line 107 column 2: start tag was here.

<PARAM NAME="font" VALUE="Verdana">

27. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

&#9993;
28. Info Line 106 column 2: start tag was here.

<PARAM NAME="item2" VALUE="... venez vous ressourcer en pleine nature !">

29. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

&#9993;
30. Info Line 105 column 2: start tag was here.

<PARAM NAME="item1" VALUE="... pour vos vacances ...">

31. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

&#9993;
32. Info Line 104 column 2: start tag was here.

<PARAM NAME="item0" VALUE="Pour un week-end ...">

33. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

&#9993;
34. Info Line 103 column 2: start tag was here.

<PARAM NAME="fontsize" VALUE="12">

35. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

&#9993;
36. Info Line 102 column 2: start tag was here.

<PARAM NAME="textdelay" VALUE="2000">

37. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

&#9993;
38. Info Line 101 column 2: start tag was here.

<PARAM NAME="delay" VALUE="50">

39. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

&#9993;
40. Info Line 100 column 2: start tag was here.

<PARAM NAME="reg" VALUE="A00046">

41. Error Line 110 column 8: end tag for "PARAM" omitted, but OMITTAG NO was specified.

</APPLET>

&#9993;
42. Info Line 99 column 2: start tag was here.

<PARAM NAME="demicron" VALUE="www.demicron.se">

En espérant que vous aurez la gentillesse de m'aider.

Salut,
bé dis-donc alors, avant d'aborder le sujet qui fâche un petit truc rapide au tout début de la réponse du validateur, effectivement tu mets bel et bien un div dans un a et ça, paaas bien a est un élément inline qui ne devrait contenir que des éléments inline aussi. En revanche, tu peux "tricher" en faisant un display block sur un élément inline, voire sur ton a si tu as besoin qu'il se comporte comme tel et ça, c'est valide.

Tout le reste, le truc qui "fâche" c'est l'applet, tu as vu, je l'ai écrit en minuscules et ainsi devraient être écrits tous tes attributs name, width, etc, etc, de ton applet (en minuscules ) et, pour parachever le tout, les valeurs données à ces différents attributs de taille, nom ou autres, devraient être entourés de guillemets doubles.

Un dernier truc, tu sais que même s'il est de bon goût dans les milieux autorisés comme disait coluche de honnir IE il représente encore environ 70% des visites sur la majeure partie des sites grand publics et est livré sans la machine java dans les OS windows versions "familiales". Bon, c'est piece of cake de se l'installer mais je ne suis pas sûr que tout les internautes ie se lancent... alors, ici où l'on glose souvent sur js pas js, j'ai un peu peur pour toi avec ton applet

Allez, plus de div dans les a, des minuscules et des guillemets, ça devrait déjà s'arranger

have swing