Forum d'entraide PHPFrance

Bonjour,

J'ai une toolbar avec un menu. Avec IE8, IE9, Firefox et tous les autres ca s'affiche comme je veux.
Juste IE7 qui affiche ca au survol du menu :

http://www.web-astronomie.com/images/site.png

Sinon ca affiche bien ca :

http://www.web-astronomie.com/images/site1.png

Voici le css de ma toolbar :

/* Graybar.css */

#graybar {
	height: 30px;
	margin-left: -460px;
	padding: 0px;
	width: 920px;
	left: 50%;
	background-color: #333;
	border-top: 1px solid #444;
	border-left: 1px solid #444;
	border-right: 1px solid #444;
	position: fixed; 
	bottom: 0;
	-webkit-border-top-left-radius: 5px;
	-khtml-border-radius-topleft: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-khtml-border-radius-topright: 5px;	
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5x;
	border-radius: 5px 5px 0 0;
}
#graybar ul.button {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#graybar ul.button li.bar {
	float: left;
	display: block;
}
#graybar ul.button li.bar a.linkbar {
	float: left;
	display: block;
	color: #aaa;
	padding: 5px 7px;
	margin: 2px;
}
#graybar ul.button li.bar a.linkbar:focus {
	background-color: #555;
	border: 1px solid #555;
	color: #fff;
	text-decoration: none;
	padding: 4px 6px;
	margin: 2px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;	
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#graybar ul.button li.bar a.linkbar:hover {
	background-color: #555;
	border: 1px solid #555;
	color: #fff;
	text-decoration: none;
	padding: 4px 6px;
	margin: 2px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;	
	-moz-border-radius: 3px;
	border-radius: 3px;
}
div.up {
	background: url(../images/graybar/up.png) no-repeat;
	float: right;
	margin: 7px 0 0 7px;
	height: 4px;
	width: 7px;
}
#graybar ul.button li.bar a.linkbar img.image {
	vertical-align: -2px;
}
#graybar ul.button li.bar a.linkbar img.text {
	vertical-align: -4px;
	padding-right: 7px;
}
#graybar span.separator-left {
	width: 1px;
	height: 100%;
	float: left;
	background-color: #444;
}

/* Bouton fermer / ouvrir */

#graybar-hide-show {
	height: 30px;
	margin-left: 470px;
	padding: 0px;
	width: 36px;
	left: 50%;
	background-color: #333;
	border-left: 1px solid #444;
	border-top: 1px solid #444;
	border-left: 1px solid #444;
	border-right: 1px solid #444;
	position: fixed; 
	bottom: 0;
	-webkit-border-top-left-radius: 5px;
	-khtml-border-radius-topleft: 5px;
	-moz-border-radius-topleft: 5px;
	border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-khtml-border-radius-topright: 5px;	
	-moz-border-radius-topright: 5px;
	border-top-right-radius: 5x;
	border-radius: 5px 5px 0 0;
}
#graybar-hide-show ul.button-hide-show {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#graybar-hide-show ul.button-hide-show li.bar {
	float: left;
	display: block;
}
#graybar-hide-show ul.button-hide-show li.bar a.show-hide {
	float: left;
	display: block;
	margin: 2px;
	height: 26px;
	width: 32px;
}
#graybar-hide-show ul.button-hide-show li.bar a.show-hide:hover {
	background-color: #555;
	margin: 2px;
	height: 26px;
	width: 32px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;	
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#graybar-hide-show ul.button-hide-show li.bar a.show-hide img {
	height: 26px;
	width: 32px;
}

/* Sous menu */

#sub-button-menu1 {
	background-color: #333;
	border: 1px solid #444;
	position: fixed; 
	bottom: 34px;
	padding: 0px;
	height: 100px;
	width: 141px;
	margin-left: 26px;
	display: none;
	border-radius: 5px;
}

Et voici le code php de ma page :

<?php
if(!isset($include) || $include != 'uqsd2f985qsd8f1664sfqs')
{
	header('Location: ../index.php');
	exit();
}
?>
<div id="graybar">
		<ul class="button">
			<li class="bar"><a href="index.php" class="linkbar"><img src="../images/graybar/home.png" alt="" class="image" /></a></li>
		</ul>
		<span class="separator-left"></span>
		<ul class="button">
			<li class="bar"><a href="#" onclick="$('#sub-button-menu1').slideToggle('fast');" class="linkbar"><img src="../images/graybar/locate.png" alt="" class="text" />Choisir une langue<div class="up"></div></a></li>
		</ul>
		<span class="separator-left"></span>
	</div>
	<div id="graybar-hide-show">
		<ul class="button-hide-show">
			<li class="bar"><a href="#" class="show-hide"><img src="../images/graybar/hide.png" alt="" onclick="changeimg(this)" /></a></li>
		</ul>
	</div>
	<div class="container">
		<div id="sub-button-menu1">
		
		</div>
	</div>

Voilà, j'espère que quelqu'un saura comment adapter le menu à l'insupportable IE7 !!
Merci beaucoup

salut,

le problème viendrait de ton div.up que tu positionnes en flottant(right).Du coup il prend toute la largeur dispo.

Par contre, je n'ai pas réussi à hacker le bouzin!
Le plus simple serait de virer ce div et placer ton image en background directement dans le lien avec un background-position et ajuster le margin-right.

Plus général, tu pourrais aussi factoriser ton code css
a+

C bon, c'est résolu =)
J'ai réussi tout seul.
Merci quand même !

Sinon t’énerves pas à mettre ton code compatible IE7.0. il est de moins en moins utilisé (2.1 % des pages visitées en Mai 2012 l'étaient avec IE7 et 15.3% avec IE8+9 : http://www.w3schools.com/browsers/browsers_stats.asp)