28173 sujets

CSS et mise en forme, CSS3

Troisième problème d'affichage avec IE : faire des coins arrondis

Bonjour,
Comme on dit, "jamais deux sans trois" : je suis confronté à un nouveau problème d'affichage avec Internet Explorer.

Je cherche à faire un bloc avec des coins arrondis. Je crée un div pour mon contenu, dans lequel je rajoute quatre divs pour les coins (positionnés en absolu et avec l'image du coin correspondant comme image de fond).

Au niveau du code, ça donne ça pour la page :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8"/>
<meta http-equiv="content-style-type" content="text/css"/>
<link href="test.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<div id="coin1"></div><div id="coin2"></div><div id="coin3"></div><div id="coin4"></div>
</div>
</body>
</html>


Et voilà la feuille de style :
html {
margin: 0;
padding: 0;
overflow: scroll;
}

body {
background: #ccc;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}

#wrapper {
position: relative;
background: #fff;
width: 400px;
margin: 0 auto;
padding: 0;
border: 4px solid #000;
font-family: sans-serif;
font-size: 0.8em;
}

#coin1 {
position: absolute;
top: -4px;
left: -4px;
background: url("i/coins.gif") 0 0 no-repeat;
width: 22px;
height: 22px;
}

#coin2 {
position: absolute;
top: -4px;
right: -4px;
background: url("i/coins.gif") -22px 0 no-repeat;
width: 22px;
height: 22px;
}

#coin3 {
position: absolute;
bottom: -4px;
left: -4px;
background: url("i/coins.gif") 0 -22px no-repeat;
width: 22px;
height: 22px;
}

#coin4 {
position: absolute;
bottom: -4px;
right: -4px;
background: url("i/coins.gif") -22px -22px no-repeat;
width: 22px;
height: 22px;
}

#wrapper p {
margin: 20px;
}


Tout va bien avec Firefox, mais avec IE c'est une autre affaire. Le problème semble aussi toucher Opera dans une moindre mesure ; ça vient donc peut-être de ma façon de mettre les choses en place plutôt que du navigateur.

Dans certains cas, les deux coins inférieurssont décalés verticalement et on voit apparaître la bordure du bloc (qu'ils sont censés cacher) en-dessous. C'est apparemment lié à la hauteur du bloc (et donc la taille du texte) puisque le comportement change selon qu'on agrandit ou rétrécit le texte.
J'ai l'impression qu'entre le moment où le navigateur calcule la hauteur du bloc et celui où il l'affiche, la valeur est modifiée.

J'ai mis la page de test en ligne.

Voici quelques captures qui illustrent le problème sous IE :
[img=http://img132.imageshack.us/img132/9154/capturevv8.th.png]
Tout va bien

[img=http://img169.imageshack.us/img169/6356/capture1ud5.th.png]
"Petit" décalage

[img=http://img241.imageshack.us/img241/6725/capture2gn6.th.png]
Rien ne va plus

Est-ce que le problème vient de mon code / mes CSS ou est-ce un bug d'affichage du navigateur qui n'est pas vraiment corrigeable ?
Modifié par terzag (25 Sep 2006 - 13:53)
Salut!

La largeur du bloc devant contenir les coins arrondis est-elle fixe ou variable?

Si elle est fixe, deux balises <div> suffiront, ainsi qu'une image.

Si tu as l'ouvrage de Raphaël en ta possession, il en parle. Smiley cligne
La largeur sera à priori fixe, mais ce n'est pas encore sûr à 100%.

Quoi qu'il en soit, je ne pense pas que d'utiliser seulement deux divs suffise à résoudre le problème du décalage "aléatoire" de ceux-ci, si ?
Modifié par terzag (25 Sep 2006 - 14:36)
#coin1, #coin2, #coin3, #coin4 {
font-size:0;
}

;)

[EDIt]
D'ailleurs à ce propos tu pourrai optimiser ta css en regroupant les attributs communs Smiley smile
Comme ça :

#coin1, #coin2, #coin3, #coin4 {
	font-size:0;width: 22px; height: 22px; position: absolute;
	background: url("i/coins.gif") no-repeat;
}
#coin1 {
top:-4px; left:-4px;
background-position:top left;
}

#coin2 {
top:-4px; right:-4px;
background-position:top right;
}

#coin3 {
bottom: -4px; left: -4px;
background-position:bottom left;
}

#coin4 {
bottom:-4px; right:-4px;
background-position:bottom right;
}

Modifié par noklio (25 Sep 2006 - 21:46)
Ce n'est pas un problème que j'ai chez moi, je ne peux donc pas d'avantage t'aider... Par contre un peu de jugeotte : c'est
a écrit :
indubitablement
lié à la taille de la police, donc tu devrais chercher à la fixer Smiley cligne
Non, pas trouvé. Comme le propriétaire du site se foutait complètement de ça, on a simplement viré les coins arrondis pour mettre une bordure standard.

Par contre, depuis, j'ai entendu parler de Curvy Corners, un script (JavaScript) qui permet d'ajouter des coins arrondis à des DIVs sans se prendre la tête.
Je n'ai pas testé et je ne sais pas si le bug d'IE arrive aussi avec. À voir.
Sujet clos
Aller à