PHPfrance

la communauté d'entraide francophone dédiée au PHP

[RESOLU] Problème de CSS sur menu avec IE7

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : [RESOLU] Problème de CSS sur menu avec IE7

Re: Problème de CSS sur menu avec IE7

par Aureusms » 09 juin 2012, 23:22

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)

Re: Problème de CSS sur menu avec IE7

par nico44530 » 16 mai 2012, 16:19

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

Re: Problème de CSS sur menu avec IE7

par Invité » 15 mai 2012, 11:15

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+

Problème de CSS sur menu avec IE7

par nico44530 » 14 mai 2012, 04:56

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 !! :tir2:
Merci beaucoup