Site compatible seulement avec FF, help...

Hello tout le monde,
Débutant en css, je commence à titiller un peu tout ça mais la compatibilité avec les navigateurs gâchent souvent tout
C'est justement ce qui m'est arrivé, après avoir fais mon joli design, j'ai démarré IE (qui prend un peu la poussière en ce moment), et là, et ben toute ma mise en page que j'aime à foiré, damned (et les png transparents non pris en charge, mais en même temps, je m'y attendais...) ! Je démarre donc Opéra, avec une petite lueur d'espoir, mais pareil, le footer et le menu qui beuguent...

Ben voilà, donc il me faudrait une petite aide pour ranger un peu ça, au moins que ce soit un minimum joli... C'est mieux que je fasse une css pour chaque navigateur, ou je fous le bordel dans le principal ?

Adresse : http://angelmax.webdynamit.net/web/mikefox.php
CSS : http://angelmax.webdynamit.net/web/style/style1.css

Merci d'avance
Modifié par Nights (18 Jul 2005 - 14:15)

Salut,

Inévitablement, tu dois rencontrer le problème des modèles de boîtes ainsi que la mauvaise prise en charge des png par IE...

Voici deux articles qui vont t'aider à corriger tout celà...

boîtes
png

Et attention aux fautes d'orthographe, ton site en est blindé...

@+

Argh ! Des fautes ? Y en a tant que ça ? Abi m'en trouve seulement 3 sans compter le "succès" que j'écrit toujours "succés" (tout ça est corrigé en tous cas), grammaire peut-être ?

Pour les png, j'avais déjà vu ce tutoriel, j'ai essayé, ca ne marche pas, et quand je le réouvre, je ne voit plus le gAMA (normal, vu que je l'ai supprimé), mais IE ne veut rien savoir

Et pour le css, je vais voir pour les boîtes, mais j'aimerais donc faire une feuille de style lisible uniquement par IE, seulement je me souviens plus de l'astuce

lol... Je précise... c'est blindé de fautes... sous IE !!!

Pour ce qui est du png, je n'ai pas eu de problèmes en appliquant cette méthode.

Pour ta feuille de style spécial IE, j'ai trouvé çà...

IEcss

... il y a peut-être mieux... Je ne me suis pas réellement penché sur le sujet...

Merci pour le css, c'est exactement ce que je recherchais

Donc je suis en train d'améliorer l'affichage sur IE, mais quelques problèmes persistent, tout d'abord, j'ai fais ma mise en page avec un tableau pour avoir les côtés en dégradés (j'aime moins la technique du background entier), mais IE veut pas me le centrer, que j'utilise le text-align ou les margin, ou les 2
Et la chose que je n'ai jamais réussi à faire : faire descendre mon menu jusqu'au footer, quelque soit la hauteur de la page
Modifié par Nights (18 Jul 2005 - 17:48)

Hum... up ?

En tous cas, mon alignement marche sur IE (mais pas en 800x600, c'est normal pour des marges négatives ?), il me reste que le problème du menu

Ouf !
Après une nuit d'essais, j'arrive enfin à faire fonctionner mon site normalement sur IE !

Seulement, fallait s'en douter, le script php qui gère les feuilles de style bug :
Ici, la css est bien celle d'IE
Là, la css est celle par défaut

Là, j'avoue que je comprends plus, surtout que ces 2 pages ont la même structure :

<? include('http://angelmax.webdynamit.net/go/head.php'); ?>
<div id="centre">
<--- contenu --->
</div>
<? include('http://angelmax.webdynamit.net/go/foot.php'); ?>

Et qu'évidemment head.php contient le script php :

<?php
if (ereg("MSIE", $_SERVER["HTTP_USER_AGENT"])) {
    echo "<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"http://angelmax.webdynamit.net/go/styles/ie.css\" />";
} else if (ereg("^Opera/", $_SERVER["HTTP_USER_AGENT"])) {
    echo "<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"http://angelmax.webdynamit.net/go/styles/opera.css\" />";
} else {
    echo "<link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"http://angelmax.webdynamit.net/go/styles/style.css\" />";
}
?>

Et au fait, je laisse ça içi ou je reposte dans "Langages serveurs" ?
PS : pour ceux qui ont Safari ou IE mac, est-ce que le site marche bien ?
Modifié par Nights (23 Jul 2005 - 04:16)

Bonjour,

Hum... Un peu de lâcher prise sur le rendu dans les différents navigateurs te rendra la vie plus facile, et t'évitera de t'embarquer dans une solution aussi lourde qu'une discrimination du navigateur basée sur l'en-tête USER_AGENT (fatalement défectueuse si je suis derrière un proxy qui vide celui-ci, si j'utilise un navigateur que tu n'as pas répertorié, etc.)

D'une manière générale, et à moins de baser sa CSS sur les extensions ou implémentations CSS propriétaires Mozilla, il est tout à fait inutile de différencier Firefox et Opera.

Pour IE, les commentaires conditionnels permettent de lui donner une CSS corrective, solution bien plus fiable et bien plus légère.

Enfin, un problème d'encodage, au passage :

#droite .titre:before { 
content: "» ";
text-decoration: none;
font-weight: normal;
}

L'encodage de ta feuille de style n'est pas indiqué:
- pas d'en-tête HTTP content type... charset=
- pas de règle @charset en tête de la CSS
- pas d'attribut du type <link charset="">
... Le navigateur s'en remet donc au charset indiqué pour la page HTML pour déterminer celui du content: "» ";. Or tes pages HTML sont en us-ascii, dans lequel ce guillemet français n'existe pas. Heureusement qu'IE, FF, et Opera sont sympas, et qu'ils assument qu'il y a erreur probable : ils rectifient tout seul, mais rien ne les y obligent ni ne te garantit qu'ils le feront dans tous les cas.

Mieux vaut :
- utiliser une référence Unicode pour ce guillemet français dans ta CSS : content: "\00BB ";
- indiquer un charset plus probant pour tes documents HTML ( iso-8859-1 sans doute)
Modifié par Laurent Denis (23 Jul 2005 - 07:26)