[CSS] Texte en italique dans un cadre

Problème d'affichage avec IE

16 avril 2006 à 11:54:55

Salut à tous. J'aurais besoin de cerveaux de 2 ou 3 autres Zér0s. J'ai un problème d'affichage sur Internet explorer (ouais, rien d'étonnant !). Sur mon blog http://sphax3d.free.fr, en l'ouvrant avec IE (biensûr), dans certains de mes billets (sur Vista par exemple), le lien "Voir le dossier sur Vista" (a la fin du billet) est en italique, et au bord du cadre à droite avec un peu de chance. Eh bien c'est ce lien qui fait s'agrandir le texte

J'ai remarquer que quand il n'est pas en italique, ce lien ne se fait pas s'agrandir le cadre, donc depuis quand IE interprète mal "font-style: italic" ??

Le problème vient bien de là.
J'ai donc essayer de contarindre les cadres en largueur, mais le navigateur de m**** n'as rien voulu "entendre" !
Merci de vous penchez 2 ou 3 min sur mon problème

strucky

16 avril 2006 à 12:30:49

Salut,

Il est où le lien "Voir le dossier sur Vista" dans ta page ?

A part un problème de largeur sur ton corps, je vois pas de problème de police en italique :euh:

JulesH.

16 avril 2006 à 12:34:49

Je sais pas trop comment le corriger, mais a la palce de italic, mets oblique, on sait jamais

bndn

16 avril 2006 à 16:51:04

Avec oblique ya rien qui change

strucky

16 avril 2006 à 18:11:47

Tu peux faire une copie d'écran ?

Car je vois pas ton problème.

Voici (310ko) ce que je vois.

bndn

17 avril 2006 à 10:56:29

J'ai juste repris ton image en soulignant le problème, merci de te pencher la dessus

Les screens

strucky

17 avril 2006 à 13:26:18

J'avais pas fais bien attention au décalage avec IE, j'avais pas flashé

Alors, j'ai trouvé la source de ton problème, il ne s'agissait pas du font-style: italic; comme je m'en doutais dès que j'ai vu le bug, mais du text-align: justify de tes paragraphes combiner au fait que tu donnais une largeur à tes blocs.

Donc, j'ai corrigé ta feuille de style en conséquence, en enlevant les width inutiles de tes blocs et qui provoquaient ce bug avec IE.

Ce qui donne :

/* =============== Balises générales =============== */

body
{
width: 769px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
background-color: #fec;
font-family: verdana, sans;
font-size: 77%;
color: #333;
}

img
{
border: 0;
}

div, p, ul, h1, h2, form
{
margin: 0;
padding: 0;
}

p
{
text-align: justify;
}

.centre
{
text-align: center;
}

hr
{
height: 2px;
color: #b74;
background-color: #b74;
border: 0;
}

.smiley
{
padding-bottom: 2px;
vertical-align: middle;
}

/* =============== Liens =============== */

a
{
font-style: italic;
color: #333;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

a.actif
{
color: #b74;
}

#haut a
{
color: #fc8;
}

#gauche ul a
{
height: 17px;
padding: 1px 0 0 15px;
background: url(css/puce_liste.png) 3px 6px no-repeat;
font-style: normal;
display: block;
}

#gauche ul a:hover
{
background: #da6 url(css/puce_liste_hover.png) 3px 6px no-repeat;
text-decoration: none;
}

#droite h2 a
{
color: #fc8;
}

.date a
{
color: #b74;
}

#bas a
{
color: #fc8;
}

/* =============== Styles de textes =============== */

p.date
{
font-family: georgia, serif;
font-size: 0.9em;
color: #b74;
}

h2
{
margin-top: 14px;
padding: 1px 0 1px 4px;
background-color: #b74;
font-family: georgia, serif;
font-size: 1.2em;
color: #fc8;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
}

.nom
{
font-weight: bold;
font-family: georgia, serif;
display: inline;
}

.texte, #tribune_libre
{
padding: 5px;
background-color: #fc8;
border-bottom: #b74 solid 2px;
}

.champ1
{
width: 164px;
height: 17px;
}

ul
{
padding-left: 0;
list-style: none;
}

ul.liste_objet
{
margin-left: 20px;
}

/* =============== Haut =============== */

#haut
{
padding: 20px 20px 5px 20px;
background-color: #b74;
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
}

#haut img
{
margin-bottom: 5px;
}

#haut h1
{
display: none;
}

#haut p
{
color: #fc8;
font-size: 0.9em;
text-align: right;
vertical-align: bottom;
}

/* =============== Corps =============== */

#corps
{
padding-top: 1px;
padding-bottom: 14px;
background-color: #da6;
}

/* =============== Menu de gauche =============== */

#gauche
{
width: 180px;
padding-left: 7px;
float: left;
}

#gauche ul
{
width: 174px;
padding: 3px;
background-color: #fc8;
border-bottom: #b74 solid 2px;
}

p#humeur
{
width: 174px;
padding: 3px;
background-color: #fc8;
border-bottom: #b74 solid 2px;
}

#gauche li
{
width: 174px;
background-color: #fc8;
}

#gauche form
{
font-size: 0.9em;
}

#tribune_libre
{
width: 170px;
height: 150px;
font-size: 0.9em;
overflow: auto;
}

#gauche .bouton
{
width: 130px;
height: 20px;
font-size: 1em;
}

/* =============== Contenu de droite =============== */

#droite
{
margin-left: 201px;
margin-right: 7px;
}

.float_right
{
margin-left: 5px;
float: right;
}

.float_left
{
margin-right: 5px;
float: left;
}

.nav_pages
{
margin-top: 14px;
padding: 3px;
background-color: #fc8;
border-top: #b74 solid 2px;
border-bottom: #b74 solid 2px;
}

#cache
{
clear: both;
}

/* =============== Bas de page =============== */

#bas
{
padding: 10px 20px 15px 20px;
background-color: #b74;
font-size: 0.9em;
color: #fc8;
-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 25px;
}

#bas_gauche
{
float: left;
}

#bas_droite
{
float: right;
}

#bas img
{
margin-bottom: 3px;
}

#bas p
{
width: 500px;
margin-left: 115px;
text-align: center;
}

bndn

26 avril 2006 à 14:15:57

Merci pour ta solution, mais ça ne résoud rien :(. Je continu à penser qu'il y a un problème avec les liens en italiques, il suffit de regarder à nouveau la page avec IE. Et on peut voir aussi le décalage entre la bannière et le contenu de la page (au niveau de la différence de couleur).

strucky

26 avril 2006 à 14:54:52

Comment ça, ça ne résoud rien ?

Désolé, mais chez moi, avec le css que je t'ai mis, il n'y a plus ce bug avec IE.