Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP Quels moyens pour pallier les deficiences d'IE ?

Quels moyens pour pallier les deficiences d'IE ?

4 réponses
Avatar
GizMecano
Bonjour =E0 tous,

Suite =E0 toutes les discussions que j'ai pu lire ici, je me suis lanc=E9=
=20
dans l'exp=E9rience de construire un site uniquement bas=E9 =E0 partir de=
CSS=20
pour la mise en forme et compl=E9tement correct selon les validations=20
(HTML 4.02, en tout cas).

Avec mon navigateur pr=E9f=E9r=E9, c'est-=E0-dire Mozilla, le rendu est=20
parfaitement ce que je voulais faire... En revanche, autant dire qu'avec =

Internet Explorer, c'est plus que vilain... Affreux !

Je savais, bien entendu (=E0 force de vous lire, ce n'est pas vraiment=20
=E9tonnant) que IE ne respectait pas vraiment les standards. Cependant,=20
j'=E9tais loin de me douter que je venais, je le crains, de cr=E9er une p=
age=20
montrant, par l'exemple, certaines incapacit=E9s de ce logiciel si bien=20
distribu=E9.

Evidemment, l'incapacit=E9 =E0 afficher correctement les PNG est un fait =

reconnu (en tout cas, c'est ce que j'ai cru comprendre). Cependant, le=20
fait que IE ne lise pas correctement une feuille de style (en tout cas=20
les informations sur TABLE, visiblement...), l=E0, je dois avouer que je =

suis tomb=E9 des nues...

Ma question est donc simple : puisque cette page, a priori, est=20
parfaitement valide selon les normes du W3C, que puis-je faire pour la=20
rendre, si ce n'est jolie, =E0 tout le moins un peu moins vilaine, pour=20
ceux qui utiliseraient IE (et ils sont nombreux...) ? Peut-=EAtre qu'il=20
suffit que j'ajoute ou modifie quelque chose sur ma CSS, non ? Ou=20
seulement qu'ils utilisent Mozilla ;) ou un autre navigateur compatible ?=


Merci de votre aide =E9clair=E9e...

La page de test est visible ici (ne jugez pas trop le contenu, s.v.p.,=20
c'est vraiment une page de test...) :

http://gang.free.fr/test/gizmecano/test/

--=20

GizMecano
Signaler un problème avec ce contenu

4 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Fabrice Bonny
Le 18/07/2003 20:09, GizMecano tapotait :

Suite à toutes les discussions que j'ai pu lire ici, je me suis lancé
dans l'expérience de construire un site uniquement basé à partir de CSS
pour la mise en forme et complétement correct selon les validations
(HTML 4.02, en tout cas).



Euh, 4.01. ;-)
Un petit truc m'échappe: pourquoi je vois plein de tables si tu dis
vouloir faire un site en CSS?

Je savais, bien entendu (à force de vous lire, ce n'est pas vraiment
étonnant) que IE ne respectait pas vraiment les standards. Cependant,
j'étais loin de me douter que je venais, je le crains, de créer une page
montrant, par l'exemple, certaines incapacités de ce logiciel si bien
distribué.



Pas distribué, installé d'office. Ceci dit surfer avec MSIE, c'est comme
faire de la retouche photo avec Paint: c'est pas parce que c'est là que
c'est utile.

Ma question est donc simple : puisque cette page, a priori, est
parfaitement valide selon les normes du W3C, que puis-je faire pour la
rendre, si ce n'est jolie, à tout le moins un peu moins vilaine, pour
ceux qui utiliseraient IE (et ils sont nombreux...) ? Peut-être qu'il
suffit que j'ajoute ou modifie quelque chose sur ma CSS, non ? Ou
seulement qu'ils utilisent Mozilla ;) ou un autre navigateur compatible ?



Un exemple en pur CSS.
Le HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Language" content="en">
<title>GizMecano Laboratory : 'Notes de bord virtuelles du Capitaine
André-François Ruaud'</title>
<meta name="description" content="The GizMecano Laboratory : 'Notes de
bord virtuelles du Capitaine André-François Ruaud'">
<meta name="keywords" lang="en" content="Web Design">
<meta name="author" content="GizMecano" lang="fr">
<link rel="stylesheet" type="text/css" href="../build/computing.css"
style="Défaut" media="screen">
</head>
<body>
<!-- start page -->
<div id="page">
<img id="logo" src="../build/logo.png" width="100" height="100"
title="Return to GizMecano Welcome Page" alt="Return to GizMecano
Welcome Page">
<img id="title" src="../build/title.png" width="284" height="100"
title="GizMecano Laboratory" alt="GizMecano Laboratory">
<h1>'Notes de bord virtuelles du Capitaine André-François Ruaud'</h1>
<img id="book" src="../web/captainbooks.jpg" width="200" height="150"
title="Thumbnail of 'Notes de bord virtuelles du Capitaine
André-François Ruaud'" alt="Thumbnail of 'Notes de bord virtuelles du
Capitaine André-François Ruaud'">
<!-- start intro -->
<div id="intro"><p>During the year 1998, when I built the first version
of the Gang Free Fellowship web site, I created personal introduction
pages for some members, as André-François Ruaud, well-known captain of a
yellow submarine which been never sing by four boys in the wind nor
assembled by any English arsenal. When A.-F. R. discovered the weblog
system and began his own, he asked me for a true personal website, and
not only two single poor pages, mainly for archiving the past blogs,
which now compose a manner of literary and artistic diary. This fully
new first version was launched 2002 1st September and is currently still
growing.</p></div>
<!-- end intro -->
<!-- start text -->
<div id="text">
<!-- start right -->
<div id="right">
<p>The <acronym title="HyperText Markup Language">HTML</acronym> code of
these pages is compiled and organized with <a
href="http://www.visic.com/webexpert/">WebExpert</a> 5, a French
Canadian application produced by Visicom Media. The <acronym
title="Cascading Style Sheets">CSS</acronym> file is corrected and
compiled with <a
href="http://www.bradsoft.com/topstyle/index.asp">TopStyle Pro</a> 2.5,
an old evaluation shareware built by BradSoft in 2001.</p>
<p>The JavaScript menu is made with <a
href="http://software.xfx.net/utilities/dmbuilder/index.html"><acronym
title="Dynamic HTML">DHTML</acronym> Menu Builder</a>, an excellent
shareware elaborated by Xavier Flix and available for trial version on
his business-related website.</p>
<p>The default font used for generic text in the <acronym>CSS</acronym>
file and JavaScript menu is <a
href="http://www.microsoft.com/typography/fonts/">Georgia</a> (version
2.12), an Open Type font created in 1996 by Microsoft and distributed
with the system Windows XP; and the one used for the title picture texts
is <a href="http://www.itcfonts.com/fonts/" class=normal>Edwardian Type
ITC</a> (version 1.05), an Open Type font produced in 1997 by
International Typeface Corporation and supplied with Microsoft Publisher
2002.</p>
<p>All graphic stuff is optimized for the net in <acronym
title="Graphics Interchange Format">GIF</acronym> (for the menu icons)
and <acronym title="Joint Photographic Expert Group">JPEG</acronym> (for
other illustrations) with the adequate Adobe <a
href="http://www.adobe.fr/products/photoshopel/main.html">Photoshop
Element</a> 2.0.</p>
<p>The pictures used for creating the left menu icons are scanned from
covers of books written or directed by André-François Ruaud, excepted
the 'Yellow Submarine' one, sketched by Patrick Marcel; and those for
illustrating the right menu are personal works using free or own
material, excepted 'Captain &amp; Books', sponsored by <a
href="http://www.blogger.com/">Blogger</a>; 'Chapitre 3', which is from
the cover of <cite>Yellow Submarine</cite> #130; and 'Chapitre 4', which
is a detail from <cite>Le Guide des Cités</cite>, drown by <a
href="http://www.urbicande.be/">François Schuiten</a>.</p>
<p id="blogger"><a href="http://www.blogger.com/"><img
src="../build/blogger.png" width="88" height="31" alt="Blogger"
title="Blogger"></a></p>
<p>All texts and other pictures illustrating the blog archives, excepted
special mentions, are © André-François Ruaud since 1995 to present.</p>
</div>
<!-- end right -->
</div>
<!-- end text -->
<!-- -->
<p id="links">
<a href="http://www.mozilla.org/"><img src="../build/mozilla.png"
width="88" height="31" title="Use Mozilla to get the best vision of the
net!" alt="Use Mozilla to get the best vision of the net !"></a>
<a href="http://gang.free.fr/"><img src="../build/gang.png" width="88"
height="31" title="The owner of these pages is a Gang Free Felloship
Member!" alt="The owner of these pages is a Gang Free Felloship
Member!"></a>
</p>
<p id="copyright">Excepted special mentions, all the material of these
pages is © P. Mergey since 1995.</p>
</div>
<!-- end page -->
</html>

La CSS:

body{
background-color:#039;
color:#FFF;
font-family:Georgia, sans-serif;
}
a{
text-decoration:none;
color:#C30;
}
a:hover, a:focus, a:active{
text-decoration:underline;
}
img{
border-style:none;
}
#page{
background-color:#FC0;
color:#000;
width:75%;
margin:auto;
padding:0.5em;
}
#logo{
float:left;
}
#title{
float:right;
}
h1{
clear:both;
font-size:1em;
padding:0 0.5em;
border:1px solid #000;
background-color:#039;
color:#FC0;
font-variant:small-caps;
text-align:right;
}
#book{
float:left;
border:1px solid #000;
}
#intro{
float:right;
font-size:small;
border:1px solid #039;
padding:0 0.5em;
margin:0.5em 0;
background-color:#FFF;
color:#000;
}
#page > #intro{
margin-left:205px;
margin-top:-152px;
}
#text{
clear:both;
border:1px solid #039;
padding:0.5em;
margin:0.5em 0;
background-color:#FFF;
color:#000;
}
#right{
border-left:1px dashed #000;
margin-left:120px;
padding:0 0.5em;
}
#blogger{
position:absolute;
margin-left:-120px;
}
#links{
border:1px solid #039;
padding:0 0.5em;
margin:0.5em 0;
background-color:#FFF;
color:#000;
text-align:right;
}
#copyright{
font-size:small;
border:1px solid #039;
padding:0 0.5em;
margin:0;
background-color:#999;
color:#FFF;
text-align:center;
}

--
Fabrice Bonny

http://openweb.eu.org/
Avatar
GizMecano
Salut,

Tout d'abord, merci beaucoup Fabrice de t'être donné autant de mal, e t
surtout la peine de me refaire un site pratiquement clef en main, avec
CSS et tout et tout...

Tu disais :

Euh, 4.01. ;-)



Oui, au temps pour moi... On dira que c'est l'enthousiasme :)

Un petit truc m'échappe: pourquoi je vois plein de tables si tu dis
vouloir faire un site en CSS?



Pourquoi, c'est incompatible ? Est-ce qu'une CSS correcte *ne doit* pas
inclure de tableau ?

Bon, d'abord, parce que, au risque de surprendre, j'ai appris le peu que
je sais du HTML en faisant des mises en page avec des tableaux, et que
loin de trouver ça compliqué ou mal fichu, je trouve ça plutôt pr atique.
Je sais, c'était à une autre époque, où le seul navigateur s'appe laient
encore Mosaic... :( A vrai dire, c'est même pire : je raisonne d'abord
avec des tableaux...

Ensuite, parce que depuis que j'ai découvert les feuilles de style, ou
en tout cas les possibilités qu'elles offrent, je me suis aperçu que, si
certaines de ces possibilités permettaient de remplacer des formats de
cellules classiques, une partie des commandes me permettait d'enrichir
les tableaux et de multiplier les possibilités de les améliorer.

Enfin, dernière touche, certes un peu naïve et qui montre sans doute mon
incompétence (je ne bidouille que par amusement et, surtout, en
pointillé), mais je ne trouve pas que les possibilités palliant
l'existence des tableaux permettent de gérer correctement une
combinaison de colonnes de tailles différentes. D'ailleurs, l'exemple
que tu m'as offert clef en main, s'il offre effectivement le même
affichage dans les deux navigateurs, n'offre pas vraiment le rendu que
je recherche (écartement des différentes cellules de manières ident iques
ou mise en vis-à-vis des logos 88x31 avec les notes qui les concernent) ...

Ceci dit, de façon plus simple, si quelqu'un arrive à me trouver des
arguments me prouvant de façon pertinente que les tableaux ne sont pas
utiles, peuvent être à tous les coups remplacés, sont lourds, sont
compliqués, seront bientôt supprimés, ou que sais-je encore, je sui s
prêt à l'écouter et à changer de façon de voir les choses, bien entendu.

Pas distribué, installé d'office. Ceci dit surfer avec MSIE, c'est comme
faire de la retouche photo avec Paint: c'est pas parce que c'est là q ue
c'est utile.



C'est le genre de phrase qu'on devrait mettre en signature... Très bien
vu la comparaison avec Paint :)

Merci beaucoup pour ton exemple de pur CSS (ce qui veut sans doute dire
que ce que je fais n'a rien de pur CSS, j'en suis conscient).

J'avoue sans honte y avoir découvert bon nombre de chose que je ne
connaissais pas et par conséquent n'utilisais jamais (et je vais bien
entendu l'étudier plus en détail).

Je vais donc encore devoir me creuser la tête à l'avenir, notamment p our
comprendre qu'elle est la différence fondementales entre une classe et
une ID, parce que j'y avais même pas pensé... Si, si, je vous jure...
Enfin, c'est comme ça qu'on apprend, pas vrai ;)

Merci encore...

Amitiés,

--

GizMecano
Avatar
GizMecano
Salut,

Gerald Niel a écrit :

La page est peut être valide syntaxiquement, ce qui ne signifie pas
qu'on point de vue de la structure est l'est.



Je prends acte : mais est-ce qu'une véritable erreur de structures ne s e
verrait pas, avec ou sans le validateur du W3C ? Est-ce qu'une erreur de
structure ne devrait pas causer des problèmes de visualisation, même
avec un navigateur respectant les normes ?

Abandonner les tables qui servent à la mise en page au profit de
"calques" ou <div>.



Mais si je veux justement faire de "la mise en page", c'est à dire des
colonnes bien délimitées avec des rangées de tailles précises, qu e
fais-je ? Je trouve pour l'instant que le DIV gère mal les vis-à-vis, ou
alors, je n'ai pas encore découvert toutes ses ressources (ce qui est
plus que probable, du reste).

Je suis bien d'accord pour convenir que les DIV remplace les cellules
simples de façon efficace, mais au niveau de "la mise en page" de la
page dans son intégralité, je ne suis pas encore convaincu (en tout c as,
je n'ai rien vu de convainquant ressemblant à ce que je veux faire, ce
qui n'est pas tout à fait la même chose). Même un site aussi clair que
MozillaZine a un tableau...

Ce qui ne devrait pas poser de gros problèmes particulier du fait de
la simplicité de la mise en page.



Sur cet exemple de page-là, c'est relativement vrai. Je dis
relativement, parce que l'exemple que viens d'envoyer Fabrice me montre
que l'utilisation de "CSS pur" donne cependant pas vraiment le même
resultat, en tout cas pas le résultat que je veux, même si les
différences entre les deux navigateurs sont, il est vrai, sérieument
applanies voire nulles.

Je sais, je suis très difficile ;)

Mais à défaut de savoir comment faire, je sais ce que je veux faire ; )

1. Tu y gagnera en lisibilité du code



Possible. Ce qui doit dire que ça allège le poids de la page, c'est ç a ?

2. Tu y gagnera en accessibilité



Là, je veux bien quelques explications complémentaires, parce que je
croyais naïvement que tous les navigateurs savaient lire les tableaux.
Ou alors, je ne comprends pas ce que tu entends par "accessibilité"...

3. Ta maintenance en sera facilité.



Sur ce coup, c'est une question de point de vue (ou d'expérience, et je
suis très loin de me targuer d'avoir la vôtre, bien entendu). C'est
certain que si on multiplie les tableaux enchâssés, ça devient comp lexe,
mais je ne vois pas la difficulté de maintenir une page conçue avec d es
tableaux.

Vous ne les aimez vraiment pas, les tableaux, pas vrai ;)

Mais je ne parviens pas encore à comprendre pourquoi (le jour où je
comprendrais, ce sera peut-être une illumination de lucidité, et je
refferais tout de cette manière, mais je bloque encore, et je crois
surtout que j'ai un sérieux chemin à faire en matière d'apprentissa ge...)

Je n'ai pas regardé la CSS, cependant j'utilise des tables pour
présenter des données sur un site, ces tables sont mise en forme pa r
les styles et je n'ai pas les problèmes que tu décris avec IE (5 et 6).



En fait, après plusieurs essais différents, je crois pouvoir dire que le
problème est que, visiblement, IE ne reconnaît pas correctement ceci :

table {
border-collapse : separate;
border-spacing : 4px;
}

Suis aller voir la CSS finalement, il y a des redondances et des
instructions inutiles.



Je t'accorde que comme je débute dans la conception systèmatique des
CSS, j'ai des scrupules à supprimer certaines commandes de peur de tout
foutre en l'air...

Il y a un moyen pour nettoyer correctement une feuille de style en
fonction de ce qui est réellement utilisé ou pas ?

Essais de structurer ta page avec des <div> au lieu des tables...



Si vous me parvenez à à m'expliquer et me convaincre que je vais obte nir
le même résultat que celui que je recherche, je veux bien m'y lancer ;)
Comment ça je suis pénible... Lent à la compréhension, sans doute ...

Merci à tous et désolé pour mon incompétence et mes incompréhen sions à
répétitions...

Amicalement,

--

GizMecano
Avatar
Fred Albrecht
Pierre Goiffon a dit dans fr.comp.infosystemes.www.auteurs :

Dans le message:bfaleb$1j5f$,
Fred Albrecht a écrit:
Je pense qu'il faudrait un petit Javascript qui les renvoie sur la
page suivante :

---------
Désolé, ce site Web est optimisé pour les clients Web modernes afin
de vous offrir la meilleure expérience possible. Votre client Web est
trop ancien ou ne respecte pas les normes.

Cliquez ici pour le mettre à jour : http://www.mozilla.org/
-------------



Défendre les standards et ne faire que des sites visibles sous Mozilla
me parait plutôt opposé. Pas vous ?




Pas vraiment dans la mesure où les sites pour Mozilla respectent plutôt bien
les standards...

Mais ça se voulait plutôt une boutade qu'autre chose.

--
Fred.
Linux, {Free,Open}BSD mercenary {sys,net}admin @ N48º53.115 E02º19.31
This message is made from the freshest handpicked electrons
http://www.fredshome.org