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 CSS, IE7 et background

CSS, IE7 et background

36 réponses
Avatar
Eric Demeester
Bonjour,

Je bricole un site pour un copain et après l'avoir vérifié sous FF 3.5
et Opera 10, vient le pénible moment de regarder ce qui se passe avec
IE.

Sous IE7 je rencontre un bug connu (mauvaise prise en compte du
background dans le <body>, mais je ne trouve plus comment le contourner.
Quand je rafraichis l'affichage de la page, tout rentre dans l'ordre.

Curieusement, je n'ai le problème ni avec IE5.5 ni avec IE6 (pour IE8,
je ne sais pas, je ne l'ai pas).

Le problème n'apparait que pour le <body>, tous les blocs inclus ayant
un comportement correct.

Dans ma CSS, j'ai :

html, body {
margin: 0;
padding: 0;
text-align: center; /* pour corriger le bug de centrage IE */
color: black;
background-color: #162856;
font-family: "Comic Sans MS", Verdana, Helvetica, sans-serif;
font-size: 1px;
position: relative;
}

La page d'accueil du site :
http://www.pagliaghju-di-cannetu.com/

Si quelqu'un a une idée...

--
Eric
Signaler un problème avec ce contenu

10 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
1 2 3 4
Avatar
Olivier Miakinen
Bonjour,

Le 02/02/2010 16:26, Eric Demeester a écrit :

Je bricole un site pour un copain et après l'avoir vérifié sous FF 3.5
et Opera 10, vient le pénible moment de regarder ce qui se passe avec
IE.

Sous IE7 je rencontre un bug connu (mauvaise prise en compte du
background dans le <body>, mais je ne trouve plus comment le contourner.
Quand je rafraichis l'affichage de la page, tout rentre dans l'ordre.



Je ne connaissais pas ce bug, mais en effet je vois un truc bizarre,
mais pas après rechargement de la page, ni (chose encore plus curieuse)
si c'est la première page que j'affiche après la page d'accueil quand je
viens juste d'ouvrir IE.

Je ne dirais pas que le background seul n'est pas pris en compte : il y
a aussi une marge ou un espacement (padding) différents de 0.

Curieusement, je n'ai le problème ni avec IE5.5 ni avec IE6 (pour IE8,
je ne sais pas, je ne l'ai pas).



Le problème existe aussi dans IE8.

Dans ma CSS, j'ai :

[...]
font-family: "Comic Sans MS", [...]



Beuah. ;-)

La page d'accueil du site :
http://www.pagliaghju-di-cannetu.com/



Quoique je ne sache absolument pas si ça peut être la cause du bug, ta
page css <http://www.pagliaghju-di-cannetu.com/css/bergerie.css> est
déclarée en UTF-8 mais enregistrée en Latin1. Tu pourrais commencer par
corriger ça, pour voir si ça change quelque chose.

Cordialement,
--
Olivier Miakinen
Avatar
alex.vaure
Olivier Miakinen <om+ wrote:

> Dans ma CSS, j'ai :
>
> [...]
> font-family: "Comic Sans MS", [...]

Beuah. ;-)



Ha, toi aussi ;-)
--
Alex
Vous avez beau dire, y'a pas seulement que de la pomme, y'a aut'chose.
Ça serait pas dès fois de la betterave, hein ?
Avatar
Eric Demeester
dans (in) fr.comp.infosystemes.www.auteurs, Olivier Miakinen
<om+ ecrivait (wrote) :

Bonsoir Olivier,

Je ne dirais pas que le background seul n'est pas pris en compte : il y
a aussi une marge ou un espacement (padding) différents de 0.



Oui. En fait j'ai l'impression que c'est tout le bloc html body {} de la
CSS qui n'est pas pris en compte, ou du moins qui n'est pris en compte
que quand on recharge la page. Comme par défaut, margin et padding ont
des valeurs non nulles sous IE, ça expliquerait.

Le problème existe aussi dans IE8.



Grmbl.

> Dans ma CSS, j'ai :
> font-family: "Comic Sans MS", [...]
Beuah. ;-)



On est du même avis, mais le client est roi :)

Quoique je ne sache absolument pas si ça peut être la cause du bug, ta
page css <http://www.pagliaghju-di-cannetu.com/css/bergerie.css> est
déclarée en UTF-8 mais enregistrée en Latin1. Tu pourrais commencer par
corriger ça, pour voir si ça change quelque chose.



Oups, je n'avais pas vu ! Pour ma défense, la CSS était passée telle
quelle au validateur w3c sans erreur. C'est corrigé mais ne solutionne
pas le problème.

Je continue à chercher...

--
Eric
Avatar
Eric Demeester
dans (in) fr.comp.infosystemes.www.auteurs, Eric Demeester
<eric+ ecrivait (wrote) :

Je continue à chercher...



Ayé, j'ai trouvé. J'ai modifié le code source de la page d'accueil et le
problème a disparu. Démonstration en visualisant avec IE7 ou IE8 :
http://www.pagliaghju-di-cannetu.com/index.php

Les autres pages n'ont pas été modifiées, comme ça on voit facilement la
différence.

Par contre je n'ai pas compris le pourquoi du comment.

Une chose est sûre, il ne s'agit pas d'un problème de CSS mais
d'insertion de fichiers, je m'explique :

Comme je suis une feignasse et que les champs meta de référencement (je
sais, ça ne sert pas à grand-chose de nos jours mais le client est roi)
sont identiques d'une page à l'autre du site ; comme de plus le client a
tout le temps plein d'idées pour améliorer et enrichir le contenu de ces
champs, je me suis dit que l'idéal était de les regrouper dans un
fichier inclus dans chaque page du site. Ainsi, quand il a une idée, je
modifie un fichier et pas 42 pages web.

J'ai donc construit le début de toutes mes pages sur ce modèle :
.....................................................................
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Bergerie de Canneto</title>

<!-- champs meta de referencement -->
<?php include("./scripts/referencement.html"); ?>
<!-- fin référencement -->

<link rel="stylesheet" href="./css/bergerie.css" type="text/css">
</head>
.....................................................................

J'ai passé ça au validateur html du w3c et j'ai été agoni d'injures. Ça
aurait du me mettre la puce à l'oreille, mais comme je ne voyais pas où
se situait le problème (et pour cause, je ne le vois toujours pas), je
suis passé outre.

Mais ça me titillait, tous ces messages d'erreur, alors j'ai modifié ma
page en supprimant l'appel au fichier stockant les meta de
référencement.

Et là, le problème a disparu.

Je me suis dit qu'il devait y avoir des erreurs de syntaxe dans
referencement.html. Pour m'en assurer, j'ai recopié le contenu de ce
fichier directement dans le code source de ma page :

.....................................................................
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
[...]
<!-- champs meta de referencement -->
<meta name="description" lang="fr" content=[...]
<meta name="keywords" lang="fr" content==[...]
<meta name="Web" content==[...]
[...]
.....................................................................

Et là, bingo, aucun problème !

pour en avoir le coeur net, j'ai à nouveau soumis la page au validateur
du w3c, et il m'a félicité parce qu'il trouvait un warning mais aucune
erreur...

J'ai pensé à un problème d'encodage du fichier inclus, mais il était
bien en utf-8 comme le reste du site.

Faites l'expérience, affichez le source de :
http://www.pagliaghju-di-cannetu.com/index.php

Ensuite affichez le source de :
http://www.pagliaghju-di-cannetu.com/bergerie.php

Ce qui nous intéresse, c'est ce sont les champs <meta> contenus entre
head et </head>.

Voyez-vous une différence ?
Avez-vous une explication ?

Parce que moi, je patauge.

--
Eric
Avatar
alainL
Eric Demeester a écrit :
dans (in) fr.comp.infosystemes.www.auteurs, Eric Demeester
<eric+ ecrivait (wrote) :

Je continue à chercher...



.............
J'ai donc construit le début de toutes mes pages sur ce modèle :
.....................................................................
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Bergerie de Canneto</title>

<!-- champs meta de referencement -->
<?php include("./scripts/referencement.html"); ?>
<!-- fin référencement -->

<link rel="stylesheet" href="./css/bergerie.css" type="text/css">
</head>
.....................................................................

J'ai passé ça au validateur html du w3c et j'ai été agoni d'injures. Ça
aurait du me mettre la puce à l'oreille, mais comme je ne voyais pas où
se situait le problème (et pour cause, je ne le vois toujours pas), je
suis passé outre.

Mais ça me titillait, tous ces messages d'erreur, alors j'ai modifié ma
page en supprimant l'appel au fichier stockant les meta de
référencement.

Et là, le problème a disparu.

Je me suis dit qu'il devait y avoir des erreurs de syntaxe dans
referencement.html. Pour m'en assurer, j'ai recopié le contenu de ce
fichier directement dans le code source de ma page :

.....................................................................
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
[...]
<!-- champs meta de referencement -->
<meta name="description" lang="fr" content=[...]
<meta name="keywords" lang="fr" content==[...]
<meta name="Web" content==[...]
[...]
.....................................................................

Et là, bingo, aucun problème !

............




Je n'y connais rien ou si peu, mais je me demande si on peut mettre du
code en php dans le head ?


--
Alain
Avatar
Olivier Miakinen
Le 02/02/2010 21:48, Eric Demeester a écrit :

Une chose est sûre, il ne s'agit pas d'un problème de CSS mais
d'insertion de fichiers, je m'explique :

[...]

J'ai pensé à un problème d'encodage du fichier inclus, mais il était
bien en utf-8 comme le reste du site.

Faites l'expérience, affichez le source de :
http://www.pagliaghju-di-cannetu.com/index.php

Ensuite affichez le source de :
http://www.pagliaghju-di-cannetu.com/bergerie.php



Fais l'expérience de demander (dans Firefox par exemple) l'affichage en
Latin1 de ces deux codes sources en UTF-8.

Avec la première page, tu vois à deux endroits la séquence  (une fois
au tout début de la page, la seconde fois au début du « menu du haut »
dont je suppose qu'il est inclus par PHP).

Avec la seconde page, tu en vois une troisième occurrence, pile poil là
où tu inclus tes champs meta.

En conclusion : trouve-toi donc un éditeur UTF-8 qui sauve les pages
sans ces $#%¬ de saloperies de BOM qui foutent la merde alors que ça
ne sert strictement à *rien* en UTF-8 !

Cordialement,
--
Olivier Miakinen
Avatar
Olivier Miakinen
Le 02/02/2010 22:03, alainL a écrit :
Eric Demeester a écrit :
[citation intégrale ou presque]





Merci de faire un peu le ménage dans les citations.

Je n'y connais rien ou si peu, mais je me demande si on peut mettre du
code en php dans le head ?



Pourvu qu'il n'y ait pas de saletés de BOM parasites, la page résultante
n'a aucun moyen de savoir si le HTML provient d'un fichier statique, ou
bien s'il a été généré par PHP, par Perl, par Java, par un programme C
compilé, ou par quoi que ce soit d'autre. Donc oui, on peut « mettre du
code en php dans le head ».

Cordialement,
--
Olivier Miakinen
Avatar
SAM
Le 2/2/10 4:26 PM, Eric Demeester a écrit :

La page d'accueil du site :
http://www.pagliaghju-di-cannetu.com/



est-ce vraiment bien nécessaire que les images 860/572px
pesassent de 220ko à plus de 300ko
alors qu'à qualité 60% et de poids frisant les 70/80ko
elle soient tout à fait supportables, acceptables ?

avec ma connexion ADSL,
l'attente du slide-show est vraiment longuette !
(page: la bergerie)

Refroidi (ou échaudé, comme on veut),
j'ai évité de voir d'autres pages ou de cliquer où que ce soit.


l'histoire du bogggage IE m'apparait comme broutille en comparaison
(de ttes façons je n'ai pas d'IE relié à l'Internet pour la voir)
(en local avec IE7 c'est toubon)
--
sm
Avatar
SAM
Le 2/2/10 9:48 PM, Eric Demeester a écrit :

Ayé, j'ai trouvé. J'ai modifié le code source de la page d'accueil et le
problème a disparu. Démonstration en visualisant avec IE7 ou IE8 :
http://www.pagliaghju-di-cannetu.com/index.php



Ha! c'est pour ça que c'est OK chez moi ? !

Les autres pages n'ont pas été modifiées, comme ça on voit facilement la
différence.

Par contre je n'ai pas compris le pourquoi du comment.

Une chose est sûre, il ne s'agit pas d'un problème de CSS



D'ailleurs, à ce propos,
faudra m'esspliquer pourquoi le conteneur ou ses éléments contenus
doivent se refarcir ce qui a déjà été déclaré au body comme :
background, font-family, tex-align
et même esspliquer ces font-size: 1px;

mais d'insertion de fichiers, je m'explique :



Non, tu te fourvoies (cf plus bas)

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

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Bergerie de Canneto</title>

<!-- champs meta de referencement -->
<?php include("./scripts/referencement.html"); ?>
<!-- fin référencement -->

<link rel="stylesheet" href="./css/bergerie.css" type="text/css">
</head>
.....................................................................

J'ai passé ça au validateur html du w3c et j'ai été agoni d'injures.



On ne doit pas pratiquer le même validateur ? !
Le mien n'a seulement râlé que pour la balise </html> manquante
(avec le copié-collé du code ci-haut)

La page elle-même, parsée par le php au préalable, satisfait
parfaitement le validateur que je fréquente.
Où est le blème ?

Faites l'expérience, affichez le source de :
http://www.pagliaghju-di-cannetu.com/index.php

Ensuite affichez le source de :
http://www.pagliaghju-di-cannetu.com/bergerie.php



Là ya plein d'erreurs

en html on ne met pas
<img src="1.jg" alt="" />
mais :
<img src="1.jg" alt="">

on n'a pas le droit d'avoir plus d'un et un seul ID de même nom
<div id="bloc_vignette">
est répété plusieurs fois (3 fois)

Ce qui nous intéresse, c'est ce sont les champs <meta> contenus entre
head et </head>.



et pourquoi ça ?
Le validateur n'y a rien vu qui clochât.

Voyez-vous une différence ?



Non et c'est bien triste

Avez-vous une explication ?



Oui,
faut des méta description et keywords différents d'une page à l'autre
sinon le référenceur croit que tu te moques de lui et passe

Parce que moi, je patauge.



Corrige tes IDs
et n'utilise pas de balise auto-fermante avec un DocType HTML
Elles ne sont requises et obligatoires qu'en XHTML

--
sm
Avatar
romer
Olivier Miakinen <om+ wrote:

En conclusion : trouve-toi donc un éditeur UTF-8 qui sauve les pages
sans ces $#%¬ de saloperies de BOM qui foutent la merde alors que ça
ne sert strictement à *rien* en UTF-8 !



Dans l'urgence, tu édites la page avec un éditeur hexa qui voit bien les
3 octets parasites que tu élimines alors facilement.
Ensuite en effet, un éditeur comme pspad entre autres enrgistre "comme
il faut".
--
A+

Romer
1 2 3 4