Firefox / Safari = language CSS différent ?

[omzen]

Bonjour

je refais une beauté à mon site internet.
Et le problème que je rencontre c'est que le résultat entre firefox et safari n'est pas le même !

J'ai trouvé l'info pour créer des block en html et y insérer des arrondis via CSS. J'aime beaucoup le résultat mais je n'y parviens pas sur firefox alors que le résultat y est sur safari. Etrange, non ?

Quelqu'un saurait / voudrait / pourrait m'aider à ce sujet?

Je travaille sur Coda / snow leopard. Le site est le suivant
http://www.coeuraccords.com/CLCA/

Merci pour votre aide.

Cordialement
OmZen
___________
voici mon code CSS pour la page "accueil"

@charset "UTF-8";
/* CSS Document */

acronym {
color: green;
}

body {
background-color: #938568;
margin: 0px;
color: #013E91;
text-align: justify;
}

/* ------------------------------------header----------------------------------- */

.ombre {
width: 860px;
height: 14px;
background-image: url("../design/ombreheader.png");
margin: auto;
}

#header {
width: 100%;
height: 250px;
background-image: url("../design/header.png");
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}

/* ------------------------------------principal----------------------------------- */

#main-up {
width: 900px;
height: 20px;
background-image: url("../design/haut.png");
margin: auto;
}

#main {
width: 860px;
min-height: 200px;
background-color: #FFFFFF;
margin: auto;
padding-left: 20px;
padding-right: 20px;
}

#main-down {
width: 900px;
height: 20px;
background-image: url("../design/bas.png");
margin: auto;
}

/* ------------------------------------fenetre----------------------------------- */

#fenetre {
width: 190px;
height: 100px;
background-color: #938568;
color: white;
float: right;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}

/* ------------------------------------piedepage----------------------------------- */

#footer-up {
width: 900px;
height: 21px;
background-image: url("../design/haut.png");
margin: auto;
margin-top: 20px;
}

#footer {
width: 860px;
min-height: 200px;
background-color: #FFFFFF;
margin: auto;
padding-left: 20px;
padding-right: 20px;
}

#footer-down {
width: 900px;
height: 20px;
background-image: url("../design/bas.png");
margin: auto;
margin-bottom: 20px;
}

#menu {
width: 840px;
height: 30px;
position: relative;
background-repeat: no-repeat;
margin: auto;
}

#menu #bouton {
margin: 0; padding: 0;
}

#menu #bouton li {
display: inline;
}

#menu #bouton li a {
float: left;
width: 120px;
height: 0;
padding-top: 30px;
overflow: hidden;
background-image: url("../design/menu.png");
background-repeat: no-repeat; outline: none;
}

/* En attente */#menu #bouton li#accueil a { background-position: 0px -90px; }
#menu #bouton li#troupe a { background-position: -120px 0px; }
#menu #bouton li#buto a { background-position: -240px 0px; }
#menu #bouton li#handicap a { background-position: -360px 0px; }
#menu #bouton li#marionnettes a { background-position: -480px 0px; }
#menu #bouton li#spectacles a { background-position: -600px 0px; }
#menu #bouton li#contact a { background-position: -720px 0px; }
/* Survol */#menu #bouton li#accueil a:hover { background-position: 0px -30px; }
#menu #bouton li#troupe a:hover { background-position: -120px -30px; }
#menu #bouton li#buto a:hover { background-position: -240px -30px; }
#menu #bouton li#handicap a:hover { background-position: -360px -30px; }
#menu #bouton li#marionnettes a:hover { background-position: -480px -30px; }
#menu #bouton li#spectacles a:hover { background-position: -600px -30px; }
#menu #bouton li#contact a:hover { background-position: -720px -30px; }
/* Press */#menu #bouton li#accueil a:active { background-position: 0px -60px; }
#menu #bouton li#troupe a:active { background-position: -120px -60px; }
#menu #bouton li#buto a:active { background-position: -240px -60px; }
#menu #bouton li#handicap a:active { background-position: -360px -60px; }
#menu #bouton li#marionnettes a:active { background-position: -480px -60px; }
#menu #bouton li#spectacles a:active { background-position: -600px -60px; }
#menu #bouton li#contact a:active { background-position: -720px -60px; }

 

[momo-fr]

Si tu n'indiques pas de valeur "height" tes div ne seront pas identiques… mais tu devrais revoir ta façon de gérer le design, en jouant avec les marges internes et la fonction background tu peux simplifier ta structure, par exemple (on peut faire différemment) :

<div id="container">
<div id="header">
<h1>Titre de ton site - mots clés</h1>
<h2>Slogan - mots clés</h2>
</div>
<div id="menu">
<ul id="bouton">
 <li id="accueil"><a href="http://forums.macg.co/pages/accueil.html">accueil</a></li>
<li>Etc&#8230;</li>
</ul>
</div>
<div id="main">
<p>Contenu</p>
</div>
<div id="footer">
<p>Contenu</p>
</div>
</div>

Comme tu vois je n'utilise pas toutes tes <div> d'habillage qui contiennent des éléments de décor (coins arrondis, ombre, etc), tout va être géré dans les quelques div présentent ici&#8230; à toi de voir comment avec la seule fonction de Background et les CSS.

Il te faut revoir certains fichiers graphiques sans doute&#8230;

Pour simplifier le fonctionnement des <div> j'englobe le tout dans une <div> maitre (#container) qui elle possède le margin-left et right en auto (pas top et bottom).

Pour te faire une idée regarde les CSS d'autres sites, une piste avec tes CSS, par exemple le footer :

#footer {
background-color:#FFFFFF;
background-image:url("../design/bas.png") no-repeat left bottom;
font-family:"Lucida Grande",Verdana,Arial,sans-serif,fantasy;
font-size:9px;
font-style:italic;
height:10px;
margin-left:auto;
margin-right:auto;
padding:0px;
width:900px;
}
#footer .top {
background-image:url("../design/haut.png") no-repeat left top;
padding-top:20px;
}
#footer p {
padding-left:20px;
padding-right:20px;
margin-bottom:6px;
}

Ceci pour une code HTML suivant :

<div id="footer">
<p class="top">Première ligne de texte de ton Footer</p>
<p>Seconde ligne si besoin&#8230; etc</p>
</div>

Tu auras certainement des ajustements à faire, ce que je t'indique c'est pour le global et la construction, ta façon de faire génère beaucoup de div qui ne sont pas nécessaires et complique la lecture de ta page (son poids, son code&#8230.

Va voir par ici pour cette histoire de coins arrondis, cela devrait t'éclairer&#8230;

Dernier détail, il faut baliser les textes avec des balises <p> la sémantique en HTML c'est important&#8230; :rateau:

Bonnes recherches&#8230;

 

[omzen]

Merci MoMo-Fr pour ton attention.

J'ai bien pris note de tes informations et des ressources que tu m'indiques.
Je vais voir comment je peux arranger cela. (bien sûr, je ne savais pas qu'il existait d'autres techniques)

Si je peux alléger, c'est sûr je suis preneur.

Pour info, j'ai eu les renseignements pour la création de block arrondis via ce site internet.

Je viendrai témoigner du résultat lorsque j'aurai plus de temps pour m'y consacrer.

Encore merci MoMo ;-)

 

[momo-fr]

Pour info, j'ai eu les renseignements pour la création de block arrondis via ce site internet.

Sans vouloir dénigrer, ton lien est sympathique mais ce type de tutoriel fait trop d'impasses sur les fondamentaux, les "astuces" données sont parfois de "fausses" bonnes astuces… bref ça manque de rigueur (d'où ton résultat).
Les bonnes sources sur le web :
Le Site du Zéro
Alsacréations
Openweb.org
Pompage.net <- fermé depuis 2009 mais plein de ressources CSS
AllHtml

Un peu de lecture avec des références comme Eric Meyer, Raphaël Goetter, Mathieu Nebra, Christopher Schmitt ou Jeffrey Zeldman.

 

[omzen]

Merci MoMo pour ces informations et ces repères.
J'ai pris le temps (autant que la tête).

Le site d'AlsaCréation m'a rudement bien aidé ;-)

J'ai essayé de prendre en compte tes conseils de rigueur. Avec beaucoup d'imperfection, j'en suis arrivé à là :
http://www.coeuraccords.com/CLCA/index.html

Qu'en penses-tu dis-moi ?

 

[momo-fr]

Pas mal… effectivement la consultation d'Asacréations t'as donné plein de pistes… mais.

Attention à la rédaction de ta page CSS, l'ordre des classes est important, il permet d'imbriquer là aussi certains attributs sur plusieurs classes.

Tu utilises des balises génériques pour des effets localisés, cela va te poser des problèmes par la suite.

Premier exemple :

div {
	margin: auto;
	width: 900px;
	height: auto;
}

Ainsi TOUTES les <div> des pages auront ce comportement où il te faudra ré-écrire un comportement pour chaque <div>, c'est bizarre car tu as fait des ID pour tes éléments conteneurs, les marges sont donc à mettre sur ces ID là et pas avec cette règle générale.
cette règle est à supprimer.

Second exemple :

p span {
  	float: right;
  	font-style: italic;
}

Ceci sert essentiellement pour ton <span> du footer, imagine si tu veux utiliser un <span> par ailleurs dans ta page ?
Soit tu fais un style local (si c'est contextuel et peu important), soit tu cibles le style du <span> au footer comme ceci :

#footer span {
  	float: right;
  	font-style: italic;
}

Ainsi tu ne touches que le <span> du footer et libères les attributs pour la balise <span> générique.

Vu avec ie7 il y a encore du taf… en placement, pour les round styles effectivement là c'est mort sur ie7.

Pour t'aider en développement web (par rapport à Explorer) va sur Netrenderer.
Et si tu utilises Firefox tu peux installer ce plug-in qui te permet de visualiser ta page avec Netrender facilement (via icône ou menu contextuel).

My Two cents

 

[omzen]

Sensass ce plug-in, merci !!!

Mais pourquoi les gens utilisent-ils Internet Explorer ??

Mon bloc principal et mon footer sont complétement à l'ouest ! Mon footer est littéralement invisible a IE8. Ce qui me rassure c'est que mon header est lui bien respecté. idem pour le menu (je ne parle pas de IE5, bien sur)

Tu me parles de "round style", j'entends le style arrondi du bloc, c'est ça ? étrangement, seul l'arrondi du footer n'est pas reconnu. Le petit programme roundies.js fonctionne pas mal.

As-tu des suggestions ?
Tout est dans le code, si je comprends bien.
déduction : si mon header est imperméable aux sauts d'humer IE, c'est que mon code du bloc central et de mon footer n'est pas correct ? Ou bien c'est IE qui est paradoxal ?

Merci pour tes remarques à propos de mes codes et de l'ordre des règles css. En effet, j'ai vu la différence et l'importance de l'ordre donné dans les règles. Et j'ai tout simplement supprimé ce que tu m'a conseillé en les répartissant ailleurs de manière plus cohérente. Et ça marche mieux grâce à tes conseils avisés ;-)
Press ENTER to look up in Wiktionary or CTRL+ENTER to look up in Wikipedia

 

[momo-fr]

Tout ceci reste une question de choix technique, perso je n'utilise pas d'attribut round-corner, je n'ai pas envie de surcharger avec une librairie javascript pour ça si c'est anecdotique dans le design, je préfère consacrer le "poids" du javascript embarqué à jQuery et des choses plus efficaces en terme d'utilisation et/ou pertinence pour le contenu à présenter.

Je pars du principe que la structure et le design doivent être relativement simples à porter sur les différents navigateurs, cela ne veut pas dire simple visuellement, l'astuce en webdesign c'est bien de donner à voir quelque chose qui paraît complexe (ou visuellement important) alors que c'est plutôt simple à mettre en &#339;uvre.

Si ton site est fixe en largeur c'est plié en 10 mn avec les fichiers graphiques qui vont bien&#8230; :rateau:

Je t'ai indiqué une piste plus haut&#8230;

Tu as là la solution à tes soucis.

Pour le site centré regarde le code source sur cette page de modèles&#8230;