28220 sujets

CSS et mise en forme, CSS3

[Résolu] Compatibilité entre les navigateurs

Note : en raison de problème de référencement avec google, j'ai du supprimer les liens vers les exemples.

Bonjour

Cela fait relativement peu de temps que je me suis mis aux CSS et j'ai essayé de respecter les règles glannées de ci de là sur le Web et dans des bouquins.

Le problème est que pour 2 sites, je n'arrive pas avoir une présentation cohérente sur les principaux navigateurs et en particulier avec Safari ou IE sur Mac.
J'ai même un copain qui a des pbs d'affichage sur IE 6 à partir d'un UltraCompact Vaio de Sony. J'avoue y perdre mon latin.

J'ai essayé de suivre les méthodologies proposées dans les tutoriaux du site et de voir ce qui se dit sur les forums mais je dois rater quelque chose.

Le problème est le même dans les 2 cas.
Modifié par Blue James (15 May 2007 - 12:39)
Bonjour et bienvenue!
Désolé je n'ai assez de temps pour jeter un oeil à tes pages.
Tout d'abord concernant le problème d'uniformité des tes pages quelque soit la navigateurs, je dirais que
c'est tout a fait normal que tu perdes les pédales puisque cela demande pas mal d'experience mais aussi une bonne dose de théorie.
Personnellement je sais très bien avant d'entammer un design CSS que je ne suis pas au bout de mes peines si je souhaite obtenir le même rendu sur tous les navigateurs et les erreurs accumulées me font progresser.
Ceci dit je pense vraiment que tu devrais exclure IE mac (truffé de bug CSS!) de tes tests et dont le developement
s'est arrêté au profit de Safari (OS10).

En tous cas bon courage pour la suite.
Modifié par Hermann (25 Jan 2006 - 18:37)
Il y a du progrés... pour le site 2...
J'ai changé les hauteurs en taille fixe par des hauteurs en %.
cela semble bien mieux fonctionner...
Ce n'est pas fini mais je progresse...
Avec un peu de chance, je réussirais à mettre [résolu] tout seul devant mon post !!
Smiley biggrin
Modifié par Blue James (15 May 2007 - 12:39)
Pour le premier site, fais attention : tu as une balise <meta> qui se balade à l'intérieur de ton <body> (pas glop).
Et un paragraphe vide qui se balade après ton tableau.

Pour ce qui est de la page indiquée, j'ai du mal à suivre le code et l'imbrication des différents éléments...

La div#global est-elle censée englober tous les éléments de la page ? C'est l'impression que j'ai quand je regarde la CSS, mais au niveau du html ce n'est pas le cas.

Attention également à l'utilisation du positionnement absolu, qui fait sortir l'élément ainsi positionné du flux du document, ce qui peut être source de problèmes.

Sinon, cette page ne passera pas sous IE Mac à cause principalement de ceci :
#global {
	position: absolute;
	left: 50%;
	margin-left: -430px;
	width: 860px;
}

IE Mac ne comprend pas la marge négative : il placera le bord gauche de la div#global à la moitié de l'écran, mais ne corrigera pas de 430px, ce qui fait qu'au lieu d'avoir un site centré, on aura un site décentré Smiley biggol

Une solution peut-être plus intéressante :
body {text-align: center;}
div#global {
	width: 860px;
	margin: 20px auto;
	text-align: left;
}

Ce qui a l'avantage d'éviter le positionnement absolu.
Salut,

Utilise plutôt le positionement 'absolute' en dernier recours, quand tu ne peux pas faire autrement. A moins de vouloir un site positionné par rapport au coin en haut à gauche... à la microsoft. Smiley ohwell
Sujet clos
Aller à