5568 sujets

Sémantique web et HTML

Pb avec balise HR avec IE

Boujour à tous,

j'ai problème avec mes balises HR avec IE, en effet je n'arrive pas à enlever la marge du haut et la marge du bas
voici mon code :

 <!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" lang="en_US" xml:lang="en_US">
 <head>
  <title> </title>
  <script type="text/javascript">
  	function showContextMenu(e){
  		document.getElementById('contextMenu').style.left = e.clientX+'px';
		document.getElementById('contextMenu').style.top = e.clientY+'px';
  		document.getElementById('contextMenu').style.visibility = "visible";
  	}
  
  	function hideContextMenu(e){
  		if(e.which !=2){
  			document.getElementById('contextMenu').style.visibility = "hidden";
  		}
  	}
  
	function rightClick(e){
		showContextMenu(e);
		return false;
	}
	
	function selectMenuItem(id){
		for (i=1; i<=6; i++) {
			if(i == id)
				document.getElementById('menuitem'+i).style.background = "#BBBBBB";
			else
				document.getElementById('menuitem'+i).style.background = "#EEEEEE";
		}
	}
  </script>
  
  <style>
.contextMenu{
	padding:0;
	margin:0;
	position:absolute;
	width:200px;
	border:1px solid #CCCCCC;
	background-color:menu;
	font-family:Verdana;
	line-height:20px;
	cursor:default;
	font-size:14px;
	background:#EEEEEE;
	z-index:100;
	visibility:hidden;
}

.participant{
	width:500px;
	height: 200px;
	border: 1px solid #CCCCCC;
}

.menuitems{
	height:20px;
	line-height:20px;
}
.bar{
	padding:0;
	margin:0;
	overflow:hidden;
	line-height:1px;
}
-->
</style>
 </head>
 <body onclick="hideContextMenu(event)">
<div id="contextMenu" class="contextMenu" onmouseout="selectMenuItem(0)">
	<div class="menuitems" onmouseover="selectMenuItem(1)" id="menuitem1">ouvrir le micro</div>
	<hr class="bar">
	<div class="menuitems" onmouseover="selectMenuItem(2)" id="menuitem2">couper le micro</div>
	<hr class="bar">
	<div class="menuitems" onmouseover="selectMenuItem(3)" id="menuitem3">modifier le nom</div>
	<hr class="bar">
	<div class="menuitems" onmouseover="selectMenuItem(4)" id="menuitem4">nommer un n° de tel</div>
	<hr class="bar">
	<div class="menuitems" onmouseover="selectMenuItem(5)" id="menuitem5">ajouter à la contact list</div>
	<hr class="bar">
	<div class="menuitems" onmouseover="selectMenuItem(6)" id="menuitem6">déconnecter</div>
</div>

<div class="participant"  onclick="hideContextMenu(event)" onContextMenu="return rightClick(event);" id="participant">TEST</div>
</script>
 </body>
</html>

merci d 'avance
Bonjour,
ajoutes ça dans le CSS d'IE:

hr {display:block; margin: -7px 0;}

Les propriétés CSS du HR sous IE s'appliquent à un HR inline implicite
encapsulé dans un HR de niveau block, donc les marges verticales ne s'y appliquent pas.

PS: n'oublies pas la FAQ Smiley cligne
Modifié par Hermann (24 Aug 2007 - 17:24)
Merci, pour ta solution. Le problème ça marche que sur IE6 et je voudrai que cela fonctionne à la fois sur IE6 et IE7
cocoLeNain a écrit :
Merci, pour ta solution. Le problème ça marche que sur IE6 et je voudrai que cela fonctionne à la fois sur IE6 et IE7


Je ne sais pas comment se comporte le hr sous IE7. Tu as mis ces propriétés dans une feuille de style IE6 (via commentaires conditionnels)?
Pour résumer, j'ai ajouté à mes css 

<!--[if lte IE 6]>
<style type="text/css">
.bar{
	_margin: -7px 0;
}
</style>
<![endif]-->


Donc ceci marche nickel sur IE6.

Mais, j'ai toujours des marges avec ma balise HR avec IE 7 Smiley sweatdrop
Bonjour,
si tu passes par les commentaires condtionnel alors tu n'as plus besoin
d'utiliser le underscore hack (devant margin).
Pour info ce hack n'est plus interprété par IE7.

Pourquoi as tu supprimé le display:block? Cette déclaration n'est utile que pour IE.
Essayes avec <!--[if lte IE 7]>, c'est pas très compliqué.
Modifié par Hermann (05 Sep 2007 - 18:14)
Sujet clos
Aller à