28218 sujets

CSS et mise en forme, CSS3

[résolu] Problème de padding sous IE7

Bonjour,

J'ai un problème qui me prend la tête sous IE7. Il s'agit d'un padding d'un span qui est pris en compte sur l'ensemble des navigateurs sauf sous IE7 (non testé sous IE8).

A noter que j'ai lu plusieurs doc sur Alsacréations, aussi bien sur les padding que sur DTD.

Voici mon problème. J'ai une div qui contient un élément graphique (une flèche) en background-image. Dans cette div, j'ai un span qui affiche une titre ayant un background-color avec un padding de 4px. Tout s'affiche correctement sur FF ou Safari, mais sous IE7.

Voici le code css :

.titlearrow{
	height: 26px;
	margin: 0;
	background-image: url(../img/fleche.png);
	background-position: 5px;
	background-repeat: no-repeat;
}

.title {
	font-size: 1.1em;
	color: #fff;
	font-weight: bold;
	margin: 0;
	padding: 4px;
	background-color: #db0046;
}


et le code html :

<div class="titlearrow"><span class="title">TITRE</span></div>


Sous IE7, le "title" s'affiche sans padding. Comme si le padding était à 0 !! Et c'est bien là mon problème. Comment faire en sorte que IE7 prenne en compte le padding de mon "title" ?

Est-ce dû à la hauteur définie dans "titlearrow" (mais cela ne change apparemment rien) ?
ou mon DTD ?
J'utilise actuellement :

<!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">


Merci
Modifié par nforum (07 Jun 2009 - 18:57)
Est-ce que tu as essayé en jouant avec les margin au lieu du padding.

Essaye ce css là et si possible mais un screenshot pour qu'on puisse avoir un visuel du bug d'affichage. Smiley smile 


.titlearrow{

	height: 26px;

	margin: 0;

	background-image: url(../img/fleche.png);

	background-position: 5px;

	background-repeat: no-repeat;

}



.title {

	font-size: 1.1em;

	color: #fff;

	font-weight: bold;

	margin: 0;

	margin-left: 4px;

	background-color: #db0046;

}


Bon courage Smiley biggrin .
Merci pour la réponse KiruSOka.
Je ferai le test prochainement. Mais voici en attendant des images du problème.

image 1, la bonne version d'affichage :
upload/10745-Image2.png

image 2, la version IE7 avec un span "title" qui a un background color bcp plus fin :
upload/10745-Image3.png
Modifié par nforum (06 Jun 2009 - 19:22)
Ok la solution que j'ai proposé n'est alors pas valide Smiley rolleyes
J'avais pas compris...

Tu peux essayer avec ce css là :


.titlearrow{
	height: 26px;
	margin: 0;
	background-image: url(../img/fleche.png);
        background-position: 5px;
	background-repeat: no-repeat;
}

.title {
	font-size: 1.1em;
	color: #fff;
	font-weight: bold;
	margin: 0;
	padding: 4px;
        display : block;
        background-color: #db0046;
}
Une page en ligne ?

Et au passage s'il s'agit vraiment d'un titre il faut utiliser un élément Hn. Smiley cligne

Edit: est-ce que tu as renseigné un line-height ?
Modifié par Heyoan (06 Jun 2009 - 19:44)
Merci pour vos réponses... et la bonne solution était d'ajouter un "line-height". Ce qui donne :

.title {
	font-size: 1.1em;
	line-height: 1.6em;
	color: #fff;
	font-weight: bold;
	margin: 0;
	padding: 4px;
	background-color: #db0046;
}


Et oui je sais, je devrais utiliser un "<Hn>" pour mon titre. Je ferai la modification.

En tout cas, merci à tous deux pour votre aide ! Smiley biggrin
Sinon il y a les solutions simple et dont la logique se comprend tout de même mieux, du genre:
<h2><span>Un titre qui va bien</span></h2>

h2 {
  padding: 0 0 6px 0;
  background: url(../img/titre-fleche.png) no-repeat 5px bottom;
}
h2 span {
  display: block;
  padding: 4px;
  color: white;
  background: #CA355A;
}

Il aurait même une solution sans utiliser de SPAN dans le H2, mais ça demanderait la création d'une image un peu particulière pour faire un fond, et comme j'ai la flemme de lancer Gimp pour donner un exemple eh bien je vais m'en tenir là.
Sujet clos
Aller à