CSS et Navigateurs...la galère.

[Moovance]

Comment tester son site xhtml/CSS quand on a qu'un Mac et que l'on veut être sûr que les Windows-PC verront bien la même chose ??!! :rolleyes:

Je me suis mise depuis peu au CSS et je tatonne encore, mais ce qui ne m'aide pas du tout c'est que je vois deux mises en page différentes entre Safari et Explorer quand je teste mes pages dans ces navigateurs ! Je viens de lire dans un post de nov 2005 qu'il ne fallait pas tenir compte de IE qui était obsolète en la matière, est-ce l'avis général ?

Je viens d'installer Opéra en plus de Firefox et Safari sur mon Mac, mais est-ce que la prévisualisation de mes pages dans ces navigateurs garantit un affichage identique sous PC avec IE par exemple (vu que c'est lui le problème...!)

L'avis des routards du web m'intéresse sur ce point, parce que c'est à devenir fou ces problèmes de compatibilité :modo:

Merci par avance de votre aide.

Christèle

 

[da capo]

Salut,
je ne suis pas un routard du web mais, on ne peut pas dire que IE est à négliger.

Même si IE ne prend pas en compte les CSS comme on pourrait l'espérer, eh bien, il faut s'en accomoder.

Une des premières astuces est de forcer la mise à 0 d'un certain nombre de paramètres problématiques comme c'est suggéré sur alsacreation.com. Cela met ainsi à 0 les comportements par défaut des différents navigateurs.

Par exemple, au début de la feuille css :

* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

Je débute encore avec les css, mais ce petit truc rend vraiment service

 

[Cinquante]

C'est un problème de faire du développement web sur Mac, on a pas IE 6. La solution est de faire au maximum au standards du web, ce sera une bonne chose, après il me semble qu'il y a des sites qui propose de prendre des screenshots de votre site web sur quelques navigateurs mais ça rame dur.

Y'a aussi la solution IE mac, qui mine de rien, peu aidé.

 

[mfay]

Autre règle de base : Ne jamais mélanger les tags WIDTH, HEIGTH et PADDING. Explorer les gère anormalement

Pour Explorer Mac, méfiance, il ne fonctionne pas comme Explorer Windows. (Sont fort chez Krosoft).

Mon truc pour tester sous Explorer Windows, c'est simplement d'avoir acheter un vieux PC d'occasion (200 euros) qui tourne avec NT 2000. Ca me permet de tester. Sinon tu peux aussi tester au boulot, en Fac, à l'école, chez des potes

En fait, il faudrait que quelqu'un écrive un mauvais navigateur pour Mac, qui marche aussi mal qu'explorer

 

[Nephou]

Un petit truc qui permet de régler pas mal de problèmes : éviter au maximum de spécifier à la fois une largeur et un padding ou un border à un élément à cause du box model d’Explorer mais préférer spécifier un marge aux éléments de celui-ci.


concrètement :

#conteneur {width:450px;}
#conteneur * {margin:5px;}


par exemple

autre chose : dans une suite d’éléments de type flottant, le premier voit sa marge doublée ; la solution est de déclarer son affichage comme inline et hop, la marge est telle que spécifiée

 

[momo-fr]

IE Mac et IE PC = pas pareil, donc faire gaffe, des fois ça passe très bien sur IE Mac, tu es tout fier, Opéra, Firefox, safari, tout pareil... et puis IE PC = tout de travers...:mad:

J'ai la chance de bosser parfois pour une SSII qui me permet de me connecter avec un soft Microchiotte "Connexion Bureau à Distance", avec ce soft j'ai un PC (un serveur) dans une fenêtre et j'ai accès à IE 6 PC. C'est un peu lent mais parfait pour tester. Une solution pratique mais il faut que quelqu'un accepte le truc... moins évident du coup...

Je note les différentes astuces pour cette histoire de pading, c'est vraiment la merde ce truc.

 

[hemelune]

http://www.browsercam.com/ est un site qui prend des screenchots de ton site sur differente config ..

essayable gratuitement pendant 24 heures.

Sinon je me suis acheté un pc 90 euros ( un truc antique ) juste pour avoir IE et pouvoir tester ..( c est la meilleur solution à mon avis )

je ne teste que 5.5 et 6 .

 

[flotifr]

Petite astuce du jour, puisque je suis en plein dedans : les hacks sont une aubaine si tu ne réussis pas a régler le problème autrement (à utiliser en dernier recours car ceci alourdit le code). Voici donc un exemple pour la propriété "width", valable pour n'importe quelle autre :


CORRECTION IE MAC seulement :

.myclass {width:200px}
/* IE Mac ne voit pas l'astérisque qui suit l'antislash \*//*/
.myclass {width:250px}
/**/
myclass a une largeur de 200px sauf pour IE MAC qui voit une largeur de 250px.


CORRECTION IE MAC ou PC :

.myclass {width:200px}
* html .myclass {width:250px}
myclass a une largeur de 200px sauf pour les différentes versions de IE qui voient une largeur de 250px.


CORRECTION IE PC seulement :

.myclass {width:250px}
*>.myclass {width:200px}
myclass a une largeur de 200px sauf pour IE PC qui voit une largeur de 250px.

Avec ça, j'arrive à me sortir de tous les cas de figure jusqu'à présent... Sachant que je ne m'attarde que sur Safari, Firefox, IE Mac et IE PC (Attention le développement de IE pour mac et PC n'a rien à voir, c'était 2 projets différents, il faut donc tester le site via virtual PC par exemple), je considère, peut-être à tord, que si le site ne s'affiche pas correctement pour le 1% d'internautes qui reste, ça n'a pas une grande importance, compte tenu du temps perdu à faire les corrections (prises de tête assurée). Et puis ceux qui utilisent encore Netscape 4 ou Opera 6, ils le savent bien que leur nevigateur est pourri !!!

 

[molgow]

il me semble qu'il y a des sites qui propose de prendre des screenshots de votre site web sur quelques navigateurs mais ça rame dur.

Voir ce sujet.

 

[Membre supprimé 2]

La solution est de faire au maximum au standards du web

Si seulement tu pouvais avoir raison :rolleyes: ma page est valide Xhtml et Css, et voici le résultat sous IE6

 

[Moovance]

Merci pour tous ces renseignement précieux !

Je pédale dans la choucroute en ce moment avec une page dont j'ai réalisé le graphisme et sur laquelle je m'exerce à la convertir en XHTML/CSS. Je me fais la main comme on dit mais je m'arrache les cheveux avec le positionement des différents éléments qui la compose !

Vous pouvez voir la page ici si ça vous en dis. Le placement est ok sous Firefox, un peu décalé sous Safari et carrément différent sous Opera ! Apparement j'ai aussi un décalage de mes menus haut et bas sous Firefox PC.

...et Alapge qui traine à m'envoyer ce livre sur le CSS que j'ai commandé !!!:mad:

 

[heliotrope]

salut,

j'ai jeté qu'un coup d'oeil rapide au source de ta page et n'ai pas de réponse précise

toutefois, la code est encore bien dans l'esprit de ce que l'on faisait "avant"

tu utilises un table pour mettre en fome (c'est mal )
les menus contenus dans les <p> gagnerait à être taggés avec ul et li

plutot que de t'acharner sur cette page, je pense que tu devrais accorder plus de temps à la définition de chaque type de contenu pour trouver les balises appropriées.

Tu peux commencer par faire un tour sur cssbeauty ou cssvault pour trouver parmi les galeries de sites présentés un exemple qui se rapproche de l'organisation de ta page et étudié le source pour y puiser des exemples de code

 

[Moovance]

Merci, je vais aller voir ça de ce pas !

 

[ufano]

Je suis en train de d&#233;velopper un site en aspx et je ne comprends pas pourquoi il s'affiche correctement sous IE, sous Firefox mais pas sous safari. J'ai du faire diff&#233;rent CSS afin que le site s'affiche de la meme facon dans IE et dans Firefox, et je me dit que c'est peut etre pour cela que safari ne reconnait pas le css? ( voir le code source)
J'aimerai juste que le site tourne sur safari, si quelqu'un a une id&#233;e...

Merci,

Seb

L'adresse est: http://demo-dotnet.g-tout.fr/index.aspx

 

[Anonyme]

Le [if safari] ça n'existe pas. On fait un site pour qu'il tourne correctement dans les navigateurs conformes et puis on ajoute une feuille de style correctrice pour IE (commentaires condionnels). De plus, tu as fait ton site en utilisant des tableaux pour la mise en page : c'est mal. Et ça manque aussi de sémantique…

On reprend tout à zéro?

 

[Anonyme]

Ah oui, et pour ne pas qu'IE passe en mode quirk et calcule les dimensions des éléments différemment, le doctype doit se trouver absolument sur la première ligne et il ne doit rien y avoir avant.

 

[ufano]

Merci pour ta r&#233;ponse.

Le if safari, je l'avais rajout&#233; parce que la page ne s'affichait pas correctement dans safari; du coup je l'ai rajout&#233; pour voir si cela changeait quelquechose. (Le r&#233;sultat est non, je ne l'ai tout simplement pas encore enlev&#233; apr&#232;s)

Je ne vois pas o&#249; j'utilise des tableaux, si tout le site est d&#233;fini par des balises div eux m&#234;me d&#233;finis dans les fichiers css. (si j'utilisais des tableaux, ceux ci s'afficherait correctement dans safari, non?)

Pour la s&#233;mantique, je suis enti&#232;rement d'accord avec toi, je ne suis pas expert du tout et j'ai essay&#233; de me d&#233;brouiller tant bien que mal, afin que le site tourne. (je suis plutot illustrateur que programmeur) et pour ce qui est du doctype, je ne vois rien d'afficher avant...


Merci encore pour ton aide, seb

 

[ufano]

Je viens de résoudre le problème d'affichage, il s'agissait d'un problème d'appel du fichier css. Merci pour m'avoir mis sur la piste. (Néanmoins j'aimerai bien savoir ou j'utilise des tableaux...)

Seb

 

[Anonyme]

Pour le doctype tu as des lignes de blancs avant et pour les tableaux je te conseille de regarder le code source de ta page. Je te conseille vivement le tutoriel que je t'ai donné plus haut.

 

[ufano]

Pour le doctype d'accord,

pour les tableaux, je ne vois pas ou ils sont... je me rappellerai quand même si j'en avais utilisé non?

Le site est programmé en aspx et jv, définie graphiquement par css et les contenus des différentes pages du site sont mises à jour au travers d'une base de donnée mdb.
Maintenant, je ne sais pas si Safari ou tout autre navigateur crée des tableaux automatiquement du fait de cette facon de procéder... honetement pour l'instant je suis content que le site 'fonctionne', je tiendrai compte de toutes les procédures à l'avenir.


P.S.: Merci pour les différentes adresses indiqués dans ta réponse, cela va surement m'être utile,

seb