28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un petit souci de mise en forme.

Pour vous montrez exactement mon souci voici deux captures d'écran respectivement sous IE et FF :

Capture IE :
upload/7594-ie.JPG

Capture FF :
upload/7594-ff.jpg

Mon problème provient du fait que sous FF le background-color prend tout le cadre, même à l'intèrieur de la double bordure et non pas sous IE. Je souhaiterez avoir le même rendu sous IE que sous Firefox mais je n'arrive pas à trouver sur quelle propriété de ma div je dois jouer.

Voici le code html :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Comité Handball 05</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
  <div class="conteneur">
  </div>
</body>
</html>


Voici le code css :

.conteneur { /*le conteneur global du site, qui sera centré */
  width: 500px;
  height: 500px;
  position: absolute;
  margin: 0;
  padding: 0;
  height: 100%;
  border-style: double;
  border-color: #E0E8D8;
  border-width: 10px;
  background-color:#BB8B8B;
}


Merci pour votre aide.
Modifié par albator_38 (23 Aug 2006 - 11:06)
Bonjour,

Presque Smiley cligne

L'ajout d'un second conteneur te permettra de contourner ce bug d'IE en différenciant la boîte (extérieure) portant la couleur d'arrière-plan et celle (intérieure) portant la bordure...
Merci pour vos réponses.

Comme je dois utiliser les propriétés width, height, position qui confère un layout à mon bloc je me suis tourné vers la solution de Laurent ou Denis (désolé mais je ne sais pas lequel est le nom et le prénom).

J'ai donc fait une imbrication de bloc div.
Le premier contenant le background et le deuxième (imbriqué dans le premier) contenant la border.

Et cela fonctionne très bien.

Encore merci.