Incompatible ie ff safari

Question

indabuzz

1 Oct 2007 à 21:03

Bonsoir à tous,

je suis tous nouveau sur le forum.

Je débute complètement en css, et je viens de réaliser mon premier site (pour ma société) www.bcomblog.fr .

J'i un gros problème, le site marche bien avec Firefox et Safari mais incompatible avec internet explorer 7 et je pense 6 aussi, tous est décaler les styles ne s'applique parfoit même pas du tout.

Avez vous quelque conseils à me donner ?

Cordialement,

IndaBuzz

6l20

1 Oct 2007 à 23:07

Voici une réponse "expérimental" et que je ne garantie absolumment pas, je ne sais même pas ce qui m'est passé par la tête... Smiley lol

En sortant ton bloc mactext du bloc conteneur ( positionné à droite ) et en modifiant le positionnement de ton image macstatique.png, il semble que cela fonctionne ( à vérifier en local chez toi avec le swf et les scripts qui vont bien et tout et tout... Smiley lol

)
Pour le html :


<body>
<div id="mactext">
<script type="text/javascript" src="flash.js"></script>
<script type="text/javascript">
insertFlash_mactext();
</script>
</div>
<div id="tooltip"></div>
<div id="conteneur">
etc...

Pour le css de mactext :


#mactext {
  position: absolute;
  margin-left:35px;
  margin-right:auto;
  margin-bottom:auto;
  margin-top:120px;
  background: url('macstatique.png');
  width: 350px;
  height: 430px
}

Cela résoud ( chez moi...) le pb de positionnement de l'image qui reçoit l'animation flash...Et cela, uniquement pour IE7... c'est évidemment une véritable cata sur IE6 Smiley decu

Il y quelques autres soucis notamment l'absence d'ascenceur sous firefox ce qui rend tes liens "page suivante" ou tes liens sur les réalisations (celles du bas ) quasi inaccessibles ou vraiment "borderline"...et ceci sous une résolution de 1024*768...
Tu as taillé ton design au couteau à beurre ?... Smiley cligne

Enfin, c'est sans doute le plus important, bon nombre de tes pages échouent à la validation W3C, en corrigeant ces erreurs, tu devrais grandement améliorer les choses...

Pour conclure, j'aime assez l'ambiance de ce site ( mis à part le "coté un peu rigide" de la structure) Smiley cligne

indabuzz

1 Oct 2007 à 23:10

Merci 6120 je vais tester tous ce que tu viens de me dire.

Pour la taille je développe le site sur un 24" (apple) alors j'ai pas mal de marges blanche tout autour de mon site Smiley langue

Et ravi que tu site te plaise. Smiley biggrin

Modifié par indabuzz (01 Oct 2007 - 23:12)

indabuzz

2 Oct 2007 à 11:47

Voila j'ai fait ce que tu ma dit, au niveau de mactext, le problème est que quand on agrandi ou diminue la taille de la page, le block mactext ne suit pas mon conteneur et reste donc en plein milieu.

J'ai corrigé toutes les erreurs de mes pages, le site est donc valide XHTML et CSS.

Je reste open si vous avez des suggestions.

6l20

2 Oct 2007 à 14:50

Hello,

Oui je vois que la quasi-totalité des erreurs déclarées par le validateur ont été corrigées, félicitations, encore un petit effort sur la page contact (d'ailleurs, tu as un "é" minuscule à [RÉALISATION ] sur ton menu, pb d'encodage ? Smiley cligne

L'offre expérimentale que je te proposais, consistait à sortir le bloc mactext du bloc conteneur et de le repositionner convenablement sur la gauche en modifiant les valeurs de ta css, ce qui n'est pas le cas actuellement, ceci dit je ne suis toujours pas persuadé que ce soit une solution...

D'autre part, qu'entends-tu par agrandir ou diminuer la taille de la page ?(changer de résolution d'écran ? modifier manuellement la grandeur de la page active ? )

Quelques soucis :
Ton anim flash d'introduction est mal positionnée (trop grosse ?) et ne semble pas fonctionner aujourd'hui...
L'anim mactext ne fonctionne pas non plus ( Firefox et IE) tu as fait des modif dans tes scripts ?
J'ai un "peu de mal" avec le positionnement de ton logo, qui me semble un peu trop en haut à gauche, et puis je pense que tu fais une erreur en positionnant un flottant,ça fait un peu beaucoup pour un logo, non ?!


#logo {
position: fixe;
float:left;
margin-top: -90px;
padding-bottom: auto;
margin-left:-60px;
margin-right:auto;
background: url('logo.png') no-repeat;
width: 415px;
height: 239px
}

Petite suggestion, tu peux tenter le png transparent, je viens de tester, il me semble que cela rend "mieux"

D'autres part, il semble que tu aies modifié le positionnement de mactext sur la page nous (Firefox et IE ) l'image se retrouve sous le logo (pas de soucis pour les autres page )

Il reste certainement des choses à améliorer, sur l'accessibilité sans doute ( les experts viendront peut-être t'en parler, moi je suis au début de mon apprentissage... Smiley lol

)
Je ne peux pas modifier la taille du texte sous IE7, c'est peut-être un bug chez moi, quelqu'un pourra-t-il confirmer ?

Après, il y a certainement des choses que je ne vois pas, peut-être un problème avec flash ou Javascript, mais j'aurai un peu de mal à te faire des remarques sur ces points Smiley decu

Il me semble qu'il y a une amélioration sous IE6, quoiqu'il en soit et en attendant l'avis de personnes mieux avisées que moi, je te conseille de visionner ton site sur des écrans plus petits, sous d'autres config si possible et sous différents navigateurs Smiley cligne

Sinon, j'aime toujours Smiley smile

Bon courage,
@+
Sylvain

indabuzz

2 Oct 2007 à 18:03

Sylvain ->

Je viens de terminer les modifications, le site est maintenant compatible 1024*768. Me reste encore le logo qui est un peut trop haut.

a écrit :
encore un petit effort sur la page contact

Oui il m'en reste une ou deux, mais je n'arrive pas à les résoudre:

"Line 39, Column 12: there is no attribute "vname"."

"Line 39, Column 115: there is no attribute "onSubmit"."

a écrit :
tu as un "é" minuscule à [RÉALISATION ] sur ton menu

C'est modifié Smiley cligne

a écrit :
je pense que tu fais une erreur en positionnant un flottant,ça fait un peu beaucoup pour un logo, non ?!

Le problème est que je suis obligé de le mettre en flottant car sinon sa fout le site en vrac. si je le met en position:absolute on ne voit pas le logo dépasser du conteneur.

j'ai des problèmes:

le texte légal en bas est dans mon conteneur sous IE6 alors que IE 7, safari et Firefox le voit en dehors de celui-ci.

Ensuite, mes liens (a) sont entourés de bleu sous IE6 et 7 alors que je les ai virés dans mon css.

Le trait de 1px en dessous des menu deviens gros sur IE6.

Dans la rubrique "contact" les nom des champs sont carrément encastrés dans les champs.

La, je suis carrément en détresse.

6l20

2 Oct 2007 à 22:37

Bon en tout cas, tu as bien "progressé", c'est plus lisible sous IE7 et incomparable sous IE6 par rapport au début, comme quoi un code plus propre... toutes mes ficelles de caleçon Smiley jap

Concernant ton logo, je pensais à une position relative par rapport au conteneur, par exemple :


img.logo {
position:relative;
left:-X (à définir suivant ton besoin)px;
top:-X(à définir suivant ton besoin)px;
margin:0pt; (si besoin)

}

Je vois que la transparence ne t'a pas inspiré...
Peut-être aussi en revoyant la taille du logo à la baisse également ?

Pourquoi un margin-top de 450px pour ton texte légal ?
L'animation d'introduction me semble toujours trop imposante, il n'y a pas moyen de réduire un peu l'affichage (80% par exemple)?

Je n'ai rien remarqué sur les liens, ni sous IE6 ni sous IE7 Smiley cligne

En ce qui concerne le formulaire, je ne sais pas trop, pourquoi utiliser un tableau ? Pour les messages d'erreurs, il va falloir attendre les spécialistes...c'est peut-être tout simple, peut-être même dû au positionnment, mais je ne vois pas trop, désolé.
Tu peux consulter les excellents tutos d'Alsacréations(sssss) cela te donneras certainement des axes de réflexions sur le positionnement par exemple Smiley cligne

@+

indabuzz

4 Oct 2007 à 11:01

Salut Sylvain,

Je tiens à te remercier pour ton aide.

Après 10h de boulot acharné ( j'ai faillit renoncer à 6 reprises ) le site est normalement compatible avec tous les navigateurs et les res: 1024/768px.

Le site est valide XHTML et CSS (il me manque 2 petites erreur sur la page contact.php mais impossible de la résoudre).

PS:je comprend toujours pas le fonctionnement de "position" (absolute,relative,fixe) m^ême après avoir relu 3 fois les tutos d'alsa, quelqu'un pourrait il m'expliquer de façon simple ?;

Merci encore Sylvain...

6l20

4 Oct 2007 à 14:20

Tu as bien fait de ne pas renoncer, le résultat est convaincant sous tout les navigateurs testés ( un décalage sous IE5.5 mais ça pourra attendre que tu fasses une petite sieste Smiley cligne

)

En tout cas, ça me plait ! Smiley smile

Ce ne sera peut-être pas au goût de tous, et les "experts du web" (entends par là les personnes dont c'est le métier, ce qui n'est pas mon cas Smiley decu

) auront certainement une vision plus pertinante, ou plus "professionnelle" de ton site (ergonomie, conseils sur les couleurs, accessibilité, etcaetera ) mais je pense que tu as déjà fait le plus gros du travail, encore une fois, mes félicitations Smiley jap

Il semble qu'il y ait un pb avec l'appel de la feuille de style de ta page 404 ( que tu pourrais personnaliser davantage, il me semble avoir vu un sujet à ce sujet sur le forum, il faudrait que je cherche...) Smiley cligne

a écrit :
La feuille de style http://www.bcomblog.fr/404.php n'a pas été chargée car son type MIME, « text/html », n'est pas « text/css »

Pour les erreurs de ta page contact, be patient, une bonne âme pourra sans doute te venir en aide, là je sèche un peu... Smiley cligne

Concernant ta question sur le positionnement peut-être que l'article d'Openweb (et suivants) pourra(ont) te faciliter la compréhension Smiley cligne

@Bientôt,
Sylvain

Sujet clos

Questions générales et questions de débutants

Incompatible ie ff safari