28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerais que les titres de mes pages, soient encadrés par des crochets (en image).
Pour cela, j'ai créé un DIV auquel j'ai appliqué en background-image le crochet d'ouverture aligné à gauche. Puis dans le DIV un H2 avec pour background-image le crochet de fermeture aligné à droite.

Sur FF et autres c'est OK, sur IE7 et IE8 idem. Le problème se pose sur IE6 qui me coupe bizarrement le crochet de fermeture, voyez l'image plutôt :
upload/720-111.gif

Je trouve ça très étrange et ne retrouve ce problème cela nulle part ailleurs.
J'aimerais un petit coup de main svp Smiley smile

Voici les sources
<div class="componentheading"><h2>Titres de pages</h2></div>

div.componentheading {
  background: url(../images/white/h2_crochetGauche.gif) left top no-repeat;
  font-family: Arial, Helvetica,sans-serif;
  font-size: 1.40em;
  font-weight: bold;
  color: #333;
  width: 100%;
  height: 23px;
  padding: 0 0 0 15px;
}
div.componentheading h2 {
position: relative;
  background: url(../images/white/h2_crochetDroite.gif) right top no-repeat;
  font-size: 1.20em;
  top: 4px;
  padding: 0 15px 0 0;
  margin: 0;
}


merci
Modifié par miltonis (26 Jan 2010 - 15:26)
As-tu un URL car avec le code que tu as donné, de mon côté sur IE6 ça ne cause pas de soucis. C'est peut-être le contexte du code fourni qui est problématique et je m'explique car ce n'est qu'une hypothèse.

width:100% et padding : Le padding s'additionne à la largeur. Admettons que tu as un div#conteneur de 300px; ton div#componentheading sera alors de 300px ( width:100% ) + 15px ( padding-left ). Alors tu as désormais un div#content plus gros que ton div#container, ce qui cause souvent des soucis dans IE 6. De plus, tu n'as pas besoin du width:100% puisque par défaut, un "block" prendra 100% de la largeur de son parent, avec le calcul du padding, à moins d'avoir des floats ( ce qui ne semble pas être ton cas )
Bonjour Sorano,
Désolé pour ma réponse tardive, il s'agit d'un site en cours de développement et qui est en local...
En effet je pense finalement comme toi que c'est du à tout le reste du code qui est pas mal compliqué (en plus avec des table). Pour info, c'est un template de Joomla...
Je vais essayer de le rendre plus aux normes en espérant que cela résoudra mon problème, en tout cas que cela m'aidera à trouver une parade.

Je vous tiens au jus.. Smiley smile
Merci