28173 sujets

CSS et mise en forme, CSS3

[resolu]Problème récurent sous IE

Bonjour ,


J'ai un problème récurent sous IE qui commence sincèrement à me stresser (habituellement je trouve toujours une solution pour esquiver , mais la je suis un peu bloquer).

Il est donc temps que je me penche sur ce problème de compatibilité.

Je voudrais écrire du texte dans un div , mon div à un bg image avec un hauteur fixe et une largeur variable.
Le véritable problème est que je souhaite écrire au milieu de ce div (aussi bien au niveau vertical que horizontal).

Sous firefox je fais un truc du genre : 

  
div.elementmenu{
	background-image:url(../images/20.jpg);
	background-repeat:repeat-x;
	float:left;
	height:31px;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	color:#FFFFFF;
	text-align:center;
	font-family:Verdana,sans-serif;
	font-size:14px;
	font-weight:bold;
	cursor: hand;
}


et sous IE je suis obligé de spécifié d'autre valeur pour la hauteur et le padding-top afin d'obtenir les mêmes résultats. (en gros je suis obligé de compléter la taille du padding au niveau de la taille total du div).

Et bien entendu lorsque je modifie pour que ça fonctionne sous IE , ça ne fontionne plus sous Firefox...
Smiley bawling

Si quelqu'un avait une ptite réponse , ça m'éviterait pas mal de galère à l'avenir. Merci d'avance
Modifié par Dart (12 Dec 2006 - 08:50)
Smiley confused


Bingo, bon c'est avec une certaine honte que je te remercie Smiley cligne

J'ai été confronté au problème plusieurs fois et j'avais pas encore fait le rapprochement avec ma déclaration de DTD...

Bref, Il me reste plus qu'à lire toute cette documentation sur les Quirk et les DTD en détail .

Merci beaucoup Smiley smile
Je comprends pas très bien ton probème.

Est- ce que tu peut nous montrer ta page?

ps: juste pour info pour synthétyser ton code tu peut faire:

background:url(../images/20.jpg) repeat-x;

à la place de 

background-image:url(../images/20.jpg);
background-repeat:repeat-x;


et


padding:10px 10px 0 10px;  ( top right bottom left)


à la place


padding-top:10px;
padding-left:10px;
padding-right:10px;


C'est une économie considérable sur tout une feuille de style Smiley cligne .
Modifié par death83 (11 Dec 2006 - 19:53)
death83 a écrit :
Je comprends pas très bien ton probème.
Euh...

Il a pourtant l'air clair.
death83 a écrit :
padding:10px 10px 0 10px;  ( top right bottom left)
à la place

padding-top:10px;
padding-left:10px;
padding-right:10px;
C'est une économie considérable sur tout une feuille de style Smiley cligne .
Ce n'est pas équivalent, puisque dans ton cas tu écrases la valeur de padding-bottom. Ceci dit, il est en effet probable que pour une div, la valeur était déjà à 0.

P.S. : Dart, si ton sujet est résolu, peux-tu s'il te plait l'indiquer en éditant ton premier message, comme indiqué dans la faq ?
Sujet clos
Aller à