28172 sujets

CSS et mise en forme, CSS3

Même CSS, nous n'avons pas les mêmes valeurs !

Bonjour tous,

Je vous mets d'abord les images et on discute aprés .......

http://griggione.free.fr/tutos/pics/373.jpg
http://griggione.free.fr/tutos/pics/407.jpg
http://griggione.free.fr/tutos/pics/408.png

C'est donc le même site avec la même feuille de style, etc., etc., un menu normal, un trop court, un trop long.
Mais voila, selon les PCs, l'affichage est different, pour info, ils sont tous sous seven, que ce soit IE ou FF.

J'ai essayé de changer les résolutions, pareil.
Modifié par griggione (21 Dec 2013 - 16:12)
Administrateur
Bonjour,

J'adore les devinettes et les défis, mais il faudrait un peu plus d'indices Smiley smile

Quelques pistes :
- Si les largeurs des éléments est exprimée en pourcentage, il faut savoir que l'arrondi des navigateurs n'est pas toujours le même : certains arrondissent juste et d'autres toujours au pixel supérieur
- Si tes éléments sont placés en display: inline-block, il faut savoir qu'il y a des espaces qui se créent et que ces espaces dépendent de la police (taille, empattements, etc.)

Si je n'ai pas touché le point sensible, j'avoue qu'un peu de code ne sera pas superflu Smiley cligne
Bonjour Raphael

Je pense que je me suis mal exprimé, il ne s'agit pas de comparaison entre FF et IE, un commentaire conditionnel régle le problème, mais bien d'affichage different pour un même navigateur.
3 PCs, tous sous seven, et tous sous FF = 3 affichages differents (sous IE pareil)

Il n'y a pas d'arrondis, j'ai aussi essayé de changer la police.

Pour les codes, voila html et css, je peux aussi te donner le lien en privé, le site n'est pas encore en prod :
<!--[if lt IE 10]> <link type="text/css" rel="stylesheet" href="template/css/ie.css" /> <![endif]-->
<div id="nav" class="grid_12">
  <ul class="menu">
    <li><a href="#URLFOND(index)">accueil</a></li>
    <li><a href="#URLFOND(rubrique&id_rubrique=2)">Qui sommes-nous</a></li>
    <li><a href="#URLFOND(rubrique&id_rubrique=1)">Nos services</a></li>
    <li><a href="#URLFOND(rubrique&id_rubrique=11)">Nos partenaires</a></li>
    <li><a href="#URLFOND(rubrique&id_rubrique=12)">Preparer votre dossier</a></li>
    <li><a href="#URLFOND(rubrique&id_rubrique=13)">Questions / Reponses</a></li>
    <li><a href="#URLFOND(rubrique&id_rubrique=21)">vos annonces</a></li>
    <li><a href="#URLFOND(rubrique&id_rubrique=17)">Nos Tarifs</a></li>
  </ul>
  ........................................
</div>

#nav {
  padding-top: 1px;
  padding-bottom: 20px;
  margin-top: 0px;
  background-image: url(../_gfx/menu-repeat.jpg);
  background-repeat: repeat-x;
  background-position: bottom;
}
.menu {
  margin: 2px 0 0 0;
}
.menu li {
  display: inline;
  border-right: 1px solid #000000;
  float: left;
  list-style-type: none;
  height: 15px;
  padding: 6px 0 4px 0;
  background-image: url(../_gfx/bouton-menu.jpg);
  background-repeat: repeat-x;
}
.menu li a {
  display: block;
  color: #ffffff;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  font-size: 0.85em;
}
.menu li:last-child {
  border-right: none;
}

Modifié par griggione (22 Dec 2013 - 07:58)
Moi, ce qui me vient directement à l'esprit (et qui saute d'ailleurs aux yeux), c'est que le texte est parfois plus gras, et parfois, il y a plus d'espace entre les lettres.

Quelle police utilises-tu ?
Car il se pourrait qu'elle ne soit pas présente sur tous tes systèmes et soit donc remplacée par la suivante (si c'est bien sur spécifié dans ton code).

Sinon, j'irai voir du coté des options de personnalisation du ClearType sous Windows, ca ne m'étonnerait pas que les paramètres ne soient pas les même en fonction de la machine utilisée.

http://windows.microsoft.com/fr-be/windows/make-text-easier-read-cleartype#1TC=windows-7
Modifié par LuciferX (21 Dec 2013 - 23:13)
Bonjour LuciferX

LuciferX a écrit :

Sinon, j'irai voir du coté des options de personnalisation du ClearType sous Windows, ca ne m'étonnerait pas que les paramètres ne soient pas les même en fonction de la machine utilisée.

Je ne peux pas demander aux internautes d'ajuster leur ClearType ........
Toutefois j'ai essayé avec les postes internes, ça change rien.

LuciferX a écrit :

Quelle police utilises-tu ?
Car il se pourrait qu'elle ne soit pas présente sur tous tes systèmes et soit donc remplacée par la suivante (si c'est bien sur spécifié dans ton code).

J'avais pourtant essayé en changeant uniquement en #nav, ce qui donne rien, par contre en suivant ta réponse, j'ai changé en body avec une classique arial, cela revient correctement.

Du coup je me pose la question, est-ce que ma feuille de style est bonne pour faire lire à tous une police moins courante, en tout cas pas d'origine dans les PCs :


@font-face {
    font-family: 'RobotoRegular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
  font-family: 'RobotoRegular', 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', 'Sans-serif';
}
RE

Les dernières nouvelles, si je fais :
body {
  font-family: 'RobotoRegular', 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', 'Sans-serif';
}
#nav {
 font-family: 'Arial', 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', 'Sans-serif';
  padding-top: 1px;
  padding-bottom: 20px;
 ........
}

C'est à dire une police classique des OS, là ça marche et c'est régulier de partout.
Donc cela vient de la feuille de style, mais à quel niveau, là je voudrais bien une explication ?
Bonjour,

Le site est bien responsive ?
Si oui, pourquoi ne pas simplement utiliser une media query et on en parle plus ?

Je ne saisis pas bien la nature du problème...
Bonjour 6l20

Une découverte pour moi.
Je ne sais pas ci cela peut régler ce problème mais assurément, pour un site en responsive, je viens de découvrir des nouvelles options.
Sujet clos
Aller à