feuille de style externe avec safari

barbidule · 5 Juin 2007

Bonjour,

J'ai un site qui fonctionne avec tous les navigateurs sauf avec safari sous Mac. Pour identifier le problème, j'ai réduit au maximum le code. Le problème vient apparemment de la feuille de style externe.
Lorsque les styles sont inclus dans la page html elle-même, tout se passe bien, mais dès que les styles sont dans une feuille externe les styles ne sont pas correctement pris en compte :

page qui fonctionne :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
#box1 {
background-color:#b2c7c8;
width:800px;
height:600px;
}
#box2 {
background-color:#ffffff;
position:absolute;
top:180px;
left:210px;
width:59px;
height:42px;
}
</style>
</head>
<body>
<div id="box1">global</div>
<div id="box2">container</div>
</body>
</html>

page qui ne fonctionne pas :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="CSS/test.css">
</head>
<body>
<div id="box1">global</div>
<div id="box2">container</div>
</body>
</html>

avec la feuille de style test.css :

#box1 {
background-color:#b2c7c8;
width:800px;
height:600px;
}

#box2 {
background-color:#ffffff;
position:absolute;
top:180px;
left:210px;
width:59px;
height:42px;
}

Et je ne vois pas du tout ce qui ne va pas, d'autant que ça fonctionne avec la plupart des autres navigateurs.

Quelqu'un aurait une idée pour me dépanner ?

Merci d'avance.

PB

fredmac75 · 5 Juin 2007

chez moi tout fonctionne à l'identique... sur Safari 2.0.4

Peut-être une erreur de chemin pour lier la css ?

Anonyme · 5 Juin 2007

Je vois pas trop où le problème, comme dit fredmac75 : sûrement une erreur de chemin (ton dossier CSS est bien en capitales?) Par contre ton doctype est faux, c'est une version abrégée non comprise par les navigateurs qui passe alors en mode quirk (ce qui peut causer des soucis avec IE). Il faut prendre un de ces doctype pour que ça soit bon.

Sinon pour faire un lien sur une feuille style le mieux c'est d'utiliser la syntaxe suivante :

Bloc de code:

<style type="text/css" media="screen">
<!--
@import url(/style/screen.css);
-->
</style>

Ce qui fera sauter les css sur les très vieux navigateurs (netscape 4 et cie). Si ton site est fait de manière sémantique, il sera parfaitement utilisable et compréhensible mais sans design, ce qui est mieux qu'un site au design mal foutu car tournant sur des navigateurs obsoltèes.

Maintenant il y a une deuxième manière de faire qui va en plus faire sauter les css pour IE mac (quasiment plus utilisé), cette méthode est parfaitement valide et standard. La voici :

Bloc de code:

<style type="text/css" media="screen">
<!--
@import '/css/screen.css';
-->
</style>

Courage

barbidule · 5 Juin 2007

fredmac75 a dit:
chez moi tout fonctionne à l'identique... sur Safari 2.0.4

Peut-être une erreur de chemin pour lier la css ?

Merci pour la réponse, mais comme je le disais cela fonctionne avec d'autres navigateurs, ce qui veut dire que le chemin doit être bon.

En fait c'est avec Safari 2.0 que j'ai un problème. J'utilise Total Validator Tool pour faire ma vérification.

Je viens de refaire un test, et je viens enfin de trouver (enfin je ne comprends toujours pas pourquoi ça fait ça) :
Pour mon post dans le forum, j'ai dit que ma feuille de style s'appelait 'test.css'. En réalité pendant mes nombreux tests, j'utilisais 'testPaulo2.css'.
Je viens de refaire un test avec chaque fichier :
Avec 'test.css' -> plus de problème
Avec 'testPaulo2.css' -> toujours le problème (bien que les fichiers soient identiques)

Je mets en pièce jointe les fichiers résultat pour les 2 tests.

Safari n'accepterait pas les feuilles de style avec un chiffre dans son nom de fichier ??

En tout cas, j'ai ma solution.

Merci

barbidule · 5 Juin 2007

Merci pour ta réponse.

gloup gloup a dit:
Je vois pas trop où le problème, comme dit fredmac75 : sûrement une erreur de chemin (ton dossier CSS est bien en capitales?) Par contre ton doctype est faux, c'est une version abrégée non comprise par les navigateurs qui passe alors en mode quirk (ce qui peut causer des soucis avec IE). Il faut prendre un de ces doctype pour que ça soit bon.

Sinon pour faire un lien sur une feuille style le mieux c'est d'utiliser la syntaxe suivante :

Bloc de code:

<style type="text/css" media="screen">  </style>

Ce qui fera sauter les css sur les très vieux navigateurs (netscape 4 et cie). Si ton site est fait de manière sémantique, il sera parfaitement utilisable et compréhensible mais sans design, ce qui est mieux qu'un site au design mal foutu car tournant sur des navigateurs obsoltèes.

Maintenant il y a une deuxième manière de faire qui va en plus faire sauter les css pour IE mac (quasiment plus utilisé), cette méthode est parfaitement valide et standard. La voici :

Bloc de code:

<style type="text/css" media="screen">  </style>

Courage

Comme expliqué dans ma réponse au post précédent, il s'agissait plutôt d'une syntaxe pour le nom de fichier de la feuille de style qui ne serait pas acceptée par Safari ??
En tout cas dans dans mes nombreux tests, j'avais effectivement en désespoir de cause esayé tout un tas de doctype différents et j'avais aussi essayé la syntaxe '@import url', mais en vain.

En tout cas merci.

Niconemo · 5 Juin 2007

barbidule a dit:
Pour mon post dans le forum, j'ai dit que ma feuille de style s'appelait 'test.css'. En réalité pendant mes nombreux tests, j'utilisais 'testPaulo2.css'.
Je viens de refaire un test avec chaque fichier :
Avec 'test.css' -> plus de problème
Avec 'testPaulo2.css' -> toujours le problème (bien que les fichiers soient identiques)

Bizarre cette histoire de chiffre. En tout cas ça ne correspond absolument pas un à un bug de Safari, c'est certain : pas de problème avec les css à chiffres dans Safari. Ça ne serait pas plutôt une erreur de syntaxe sur la capitale ? testpaulo2.css au lieu de testPaulo2.css ? De plus il faut bien se méfier des histoire de cache quand on fait ce genre de tests. Vider le cache de chaque navigateur à chaque fois (sachant qu'ils n'ont pas tous le même comportement et que recharger la page ne suffit pas).

Anonyme · 5 Juin 2007

Niconemo a dit:
Bizarre cette histoire de chiffre. En tout cas ça ne correspond absolument pas un à un bug de Safari, c'est certain : pas de problème avec les css à chiffres dans Safari. Ça ne serait pas plutôt une erreur de syntaxe sur la capitale ? testpaulo2.css au lieu de testPaulo2.css ? De plus il faut bien se méfier des histoire de cache quand on fait ce genre de tests. Vider le cache de chaque navigateur à chaque fois (sachant qu'ils n'ont pas tous le même comportement et que recharger la page ne suffit pas).

À mon avis c'est un truc comme ça

Benjamin D.C. · 5 Juin 2007

gloup gloup a dit:
Sinon pour faire un lien sur une feuille style le mieux c'est d'utiliser la syntaxe suivante :

Bloc de code:

<style type="text/css" media="screen">  </style>

Effectivement mais bon, tu peux par contre franchement laisser tomber les commentaires d'évitement pour le @import...

barbidule · 6 Juin 2007

Ca me semble aussi bizarre cette histoire de nom de fichier, et effectivement je ne maîtrise pas le refresh du navigateur puisque je n'ai pas Safari ni Mac. J'utilise un outil qui s'appelle Total Validator et qui permet de tester des pages web sur plusieurs navigateurs à distance.
J'ai refait quelques tests, en changeant les couleurs dans la feuille de style, et en changeant le nom de fichier et j'obtiens ce qui est attendu sauf, systématiquement, quand je remets comme nom testPaulo2.css, et ce, toujours uniquement pour Safari. C'est à n'y rien comprendre.
Mais comme je le disais, je ne maîtrise pas le comportement du navigateur. Je ne sais pas si la feuille de style est dans le cache ou ailleurs.
Si ça tente quelqu'un, je laisse la page en ligne dans la configuration qui ne "fonctionne" pas pendant quelques temps : http://82.225.229.42/~paulo/

et voici le code correspondant :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="CSS/testPaulo2.css">
</head>
<body>
<div id="box1">global</div>
<div id="box2">container</div>
</body>
</html>

avec la feuille de style correspondante (testPaulo2.css) :

#box1 {
background-color:#b2c7c8;
width:800px;
height:600px;
}

#box2 {
background-color:#f0ff0f;
position:absolute;
top:180px;
left:210px;
width:59px;
height:42px;
}

Et ensuite, j'arrête là les tests, même si je n'ai pas trouvé ce qui ne va pas.
Je changerai juste de nom de fichier

A+,

PB

feuille de style externe avec safari

barbidule

Membre enregistré

fredmac75

Membre expert

Anonyme

Invité

barbidule

Membre enregistré

barbidule

Membre enregistré

Niconemo

Modo (toujours vivant !)

Anonyme

Invité

Benjamin D.C.

Membre expert

barbidule

Membre enregistré

Sujets similaires