IE, Firefox, Opera / border et debordement Résolu/Fermé

Question

Bonjour à tous,
Voila j'ai un petit problème avec un site web que je viens de terminer.
Je l'ai créé en me basant sur Firefox (Win XP). Maintenant je constate avec amertume que le rendu avec Opera ou IE7 (et même Firefox sous Fedora8) n'est pas terrible :
- les bordures des boutons du menu n'apparaissent pas avec IE7, sont décallées avec Opera et Firefox (Fedora8).
- dans ma page j'ai fait un div avec une border "dashed" pour mettre en valeur des petits bouts de code 
avec IE7 la bordure n'est pas affichée et le texte déborde,
avec Opera la bordure est affichée mais le texte déborde.

Pour ce qui est du débordement, je suppose que c'est la faute des balises <XMP>...

Le site est par ici : MON SITE


Amis du net je compte sur votre aide!
Merci d'avance,

pierre.inalco

Utilisateur anonyme · Answer

Bienvenu dans l'enfert des webdeveloppeur. En fait tu dois  tout coder "en brut" c'est a dire sans style (oui oui je sais cela va etre tout moche) mais ton code sera purifié et marchera correctement
ensuite tout ce qui est le style (décalages, images de fond, type d'écriture) tu dois le gérer avec un feuille de style css
sache que c'est trés chiant, par exemple je vais te montrer mon site internet http://kickntoast.free.fr/
J'ai fait comme je t'ai dit plus haut 
Le code en lui même a été facile a écrire mais la feuille de style (pour qu'elle soit adaptée a IE et a Firefox) j'ai mis 10 heures pour la faire ...

pierre.inalco · Answer

C'est la méthode que j'ai appliqué à mon site : une page HTML et une feuille CSS.

Utilisateur anonyme · Answer

b je ne sais pas alors désolé

Gihef · Answer

Bonjour, je ne connaissais pas. C'est du XML, pas du HTML, non ? Remplace-les par des choses plus actuelles, des <pre> ? Seulement, ça crée de nouveaux problèmes. Le code HTML est interprété. J'ai résolu ça en remplaçant le “<” du <table> dans le code du script par son nom HTML “<”. Il reste le problème des débordements. Je ne me suis jamais penché sur le problème, mais il me semble que ça concerne du “wrap”, du “white-space”. Une discussion récente de ce forum l'évoque http://www.commentcamarche.net/forum/affich 3718912 balise pre Pour le menu qui se balade dans Opera. Je te propose cette solution : — supprime le “position: relative;” de “#en_tete a, #en_tete .current {” — ajoute “position : relative;” dans “#en_tete {” — crée un nouveau style#en_tete #menu { position : absolute; bottom : 2px; }— place les liens de ton menu dans une <div><div id="menu"> <a href="../index.html">le projet</a> <a href="../mot.html">le mot</a> <a href="../outils.html">les outils</a> <span class="current">le script</span> <a href="../tableaux/tableaux.html">les tableaux</a> </div>Chez moi, Ff et Op l'interprètent correctement. Avec quelques réglages à ton goût, ça devrait passer. Mais avant de faire tout ça, passe ta feuille de styles au validateur et rectifie-la (gray. Ben oui, c'est un “a”) http://jigsaw.w3.org/... Avec des codes de couleurs, il n'y a pas de problèmes. ++ Le site m'intéresse. Son adresse restera valide ? --

pierre.inalco · Answer

Bonjour Gihef,

un grand merci pour ton aide.
Ta solution est beaucoup plus logique, beaucoup moins "bricolage" que ce que j'avais fait.

Je viens de faire un test sur la page d'accueil, avec un fond rouge, pour voir si tout mes éléments sont bien alignés comme il faut  :

http://pierre.inalco.free.fr/index.html

C'est impeccable avec IE et Opera, mais Firefox me met un espace d'1px.
Je ne comprends pas...

Voici une capture d'ecran que tu puisses constater par toi même : http://pierre.inalco.free.fr/test.PNG

A+

PM;


PS: le site devrait rester au moins jusqu'à l'année prochaine

Gihef · Answer

Il est possible que tu aies une border-bottom d'1px qui ait un effet indésirable.
Compense ça par un -1px au bottom du #menu ?
Ou ajoutes-en une aux éléments du #menu ?


++
“font-family : "Courier New", serif;”
"Courier New" est plutôt une “monospace”.

--

pierre.inalco · Answer

dans ma page j'ai fait un div avec une border "dashed" pour mettre en valeur des petits bouts de code avec IE7 la bordure n'est pas affichée et le texte déborde, avec Opera la bordure est affichée mais le texte déborde. Problème résolu. J'ai mis une balise

 et spécifié, dans le code html, un affichage différent (border: solid) pour IE qui supportait mal ma border en dashed. (cf. code CSS)

 les bordures des boutons du menu n'apparaissent pas avec IE7, sont décallées avec Opera et Firefox (Fedora8).

En mettant mon menu sous forme de liste j'ai résolu le problème d'espace que j'avais avec FireFox.
C'est maintenant identique sous IE, Opera et FF.

Dernier problème : j'aimerais supprimer la bordure en dessous du bouton activé (ex: "le projet" pour index.html) afin d'avoir un effet de fondu avec le corps de la page...

Si quelqu'un a une idée, je suis toujours preneur! :D

A+

la page : http://pierre.inalco.free.fr/index.html

pierre.inalco · Answer

Il est possible que tu aies une border-bottom d'1px qui ait un effet indésirable.
Compense ça par un -1px au bottom du #menu ?
Ou ajoutes-en une aux éléments du #menu ?

++
“font-family : "Courier New", serif;”
"Courier New" est plutôt une “monospace”. 

Je viens juste de voir ton post et je vais essayer ce que tu proposes.
Ca me permettra sans doute de regler ce probleme de border dont je viens de parler...
Merci du conseil,

A+

pierre.inalco · Answer

Je viens de faire une série de test... ça me fait pareil qu'avant.
Quand je mets -1px pour Firefox, ça applique les changements à IE et Opera qui n'en ont pas besoin.
Bref, c'est un vrai casse-tête.

Je recommencerai demain...

A+

midnnight · Answer

Bonjour, juste en passant,un code html écrit scrupuleusement dans le corps en respectant un ordre strict du type: menu/ marge G/ centre/ marge D/ pied de page, devrait passer de la même façon dans FF, IE, Opéra, Netscape...L'ajout du css (utile selon les cas) est toujours délicat, au terme et à la virgule près, c'est vrai, c'est casse tête et quand on trouve l'erreur, bien la noter pour s'en souvenir encore 3 mois après !( lol)......

pierre.inalco · Answer

Bonsoir à tous,
Ca y'est, j'ai réglé mon problème! 

Ceux que la solution intéresse peuvent aller voir la version définitive de mon site :

http://pierre.inalco.free.fr/shizen/index.html OU
http://www.tal.univ-paris3.fr/plurital/travaux-2007-2008/L7T04-2007-2008/Pierre-Marchal/index.html

A bientot,

IE, Firefox, Opera / border et debordement

11 réponses

Discussions similaires