18041 sujets

Questions générales et questions de débutants

[résolu] Mise en forme de bordures entre firefox et IE

Bonjour à tous,

Mon petit soucis du moment et la mise en forme de bordures entre firefox et IE....

Le problème: J'ai encadré mon titre<h1>Bienvenue</h1> par des bordures sur firefox tout est ok l'encadré restent aurour du texte mais..? Sur IE les bordures prennent toute la largeur du bloc <div id="conteneur"> au lieu de s'arréter après le texte......

Ma question est..? Qu'elle est l'astuce pour corriger ce bug (sans être obligé de mettre mon texte dans un tableau ou un bloc div)....

Dans l'attente de trouver la solution, je vous remercie d'avance de votre aide futur.... Smiley prie 




<body>

<div id="conteneur">
	<h1>Bienvenue</h1>



</div>






*{
	font-size:100%;
	margin:0 auto;
	padding:0;
}
body{
	font-family:Arial, Helvetica, sans-serif;
	background-image:url(../images/fond/image.gif);
	font-size:100%;
	text-align:center;
	margin:0 auto;
	padding:0;
}
div{
	text-align:center;
	margin:0 auto;
	padding:0;
}
img{
	border:0 none;
}
/**************
corps page
**************/
#conteneur{
	position:relative;
	width:590px;
	height:650px;
	background:url(../images/fond/image2.gif) no-repeat top center;
}
h1{
	font-size:2em;
	color:#FF0000;
	text-align:center;
	font-weight:bold;
	letter-spacing:5px;
	border:solid 2px #FFCC00;
}

Modifié par lezarts (24 May 2010 - 03:18)
En fait, que la bordure de ton h1 prenne toute la largeur n'est pas un bug.

L'élément h1 étant de type bloc, il prend automatiquement toute la largeur disponible. (Je suis donc à prime abord surpris que la bordure soit autour du texte sur Firefox... As-tu mis un bon Doctype?)

Quand à la solution pour que la bordure reste autour du texte, tu en as plusieurs.

Tu peux donner une largeur définie à h1. La bordure se maintiendra donc à la grandeur définie.

Mais, si tu veux vraiment que celle-ci reste autour du texte, je te conseillerais ainsi:


<h1><span>Bienvenue</span></h1>


Et dès lors, donner une bordure à span qui est un élément en ligne.


span{
         border:solid 2px #FFCC00; 
}
Bonjour,

Merci cela fonctionne, je n'avais pas penser au span.....

Parfois il m'arrive de me casser la tête alors que la solution est devant les yeux...

Bref..

encore merci pour pour ton aide......
Modifié par lezarts (24 May 2010 - 21:17)
Sujet clos
Aller à