[resolu]compatibilité ie6 ie7 mais bug anim flash

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [resolu]compatibilité ie6 ie7 mais bug anim flash

RICOTTE

bonjour à tous ,

je suis nouveau sur le forum et voila mon problème :
en effet je construis un mini site(xhtml et css) pour ma clinique et je rencontre des problemes de compatibilité sous ie6 et ie 7 alors que sous ie8 c'est parfait.
je pense qu'il s'agit de ma commande display:inline-block que j'utilise pour mon menu mais qui n'ai pas pris en charge par ie6 et mal compris sous ie7.
je vous fais suivre mon code du css puis celui du html car le site est en intranet et non accessible de l'extérieur
merci par avance de vos réponses car je craque un peu

Message édité par RICOTTE le 05-03-2010 à 19:14:03

Publicité

RICOTTE

mon code css

Code :

#menu {width:900px;
margin-left: auto; margin-right: auto;
height:80px; background:url(icons/arrows8bis2.gif);
background-repeat: no-repeat;
text-align:center;
border:0px solid #c5d5e8;
border-width:0px
margin-left: auto; margin-right: auto; }
#menu ul {margin:0;
padding:0;
list-style:none;
white-space:nowrap;}
#menu ul {display:inline-block;}
#menu li {display:inline-block; display:inline;}
#menu ul.level1 div {
position:absolute;
left:-9999px;
visibility: visible;
}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative; padding-top:2px;}
#menu ul li div ul {margin:0; background:url(transparent);}
#menu a.level1-a {display:block; height:23px; font:bold 12px Comic Sans MS; color:#010101; line-height:21px; text-decoration:none;padding:0 15px 0 15px; text-align:center;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover div {left:50%; top:25px; padding-top:0; background:url(transparent);}
#menu ul li:hover div ul {position:relative; left:-39%; padding:7px 0 0 0; margin:0; list-style:none;}
#menu ul li div ul li a {display:inline-block; font:bold 12px Comic Sans MS; color:#010101; line-height:20px; text-decoration:none; padding:1px 6px 2px 6px;}
#menu a:hover div {left:0; top:25px;}
#menu a:hover div ul {position:relative; left:-50%; padding-top:7px;}
#menu li:hover div ul li {display:inline-block;}
#menu a:hover div ul li a.sub {margin-right:4px;}
#menu li a.fly {background:url(transparent) no-repeat center bottom;}
#menu li a:hover, #menu li a.fly:hover {white-space:nowrap; color:#fff; border:1px solid #000; padding:0 14px; border-width:0 1px; background:url(icons/arrows5bis.gif) repeat-x;}
#menu li:hover > a,
#menu ul li:hover > a.fly {white-space:nowrap; color:#fff; border:1px solid #000; padding:0 14px; border-width:0 1px; background:url(icons/arrows5bis.gif) repeat-x;}
#menu ul li div ul li a:hover {color:#000;}
#menu ul :hover div ul div {left:-9999px;}
#menu ul :hover div ul li:hover {position:relative;}
#menu ul :hover div ul li a.drop {background:url(transparent) no-repeat center bottom;}
#menu ul :hover div ul li a:hover {position:relative; background:url(icons/arrows3.gif); padding:0 5px 1px 5px; border:1px solid #c5d5e8; color:#000;}
#menu ul :hover div ul li:hover > a {position:relative; background:url(icons/arrows3.gif); padding:0 5px 1px 5px; border:1px solid #c5d5e8; color:#000;}
#menu ul :hover div ul :hover div {left:50%; top:22px;}
#menu ul :hover div ul :hover div ul {left:-50%; padding:10px; background:url(icons/arrows6.gif); border:1px solid #fff; border-color:#fff #678 #567 #fff; text-align:center; filter: alpha(opacity=80); opacity:0.8}
#menu ul :hover div ul :hover div ul li {display:block; height:auto; line-height:15px; text-align:center;}
#menu ul :hover div ul :hover div ul li a {height:auto; position:static; line-height:15px; color:#000; padding:1px 0;}
#menu ul a:hover div ul a:hover div ul li a {margin-left:-16px;}
#menu ul :hover div ul :hover div ul li a:hover {color:#369; background:transparent; border:0; padding:1px 0;}
#menu table {position:absolute; top:0; height:0; width:0; left:50%; border-collapse:collapse;}
#menu a:hover table a:hover table {left:50%; width:0; height:20px; top:0; margin-left:-1px;}
#menu ul :hover div ul :hover div ul li:hover a {background:transparent; border:0;}
#corps {
width: 900px;
margin-left: auto;
margin-right: auto;
top: 140px;
height:1000px;
color:#369;
background:transparent;
border:transparent;
text-align:center;
padding: 0px 0px 0px 0px;
left: auto;
right: auto;
}

gatsu35

Blablaté par Harko

le display:inline-block n'est possible que sur des élément inlines sous IE6
file un lien vers ta page ou poste ton code HTML et CSS ici on va trouver une solution propre

---------------
Blablaté par Harko

RICOTTE

mon code html

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<link rel="stylesheet" media="all" type="text/css" href="dropline-center.css" />
<title>Articles d'imagerie</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">
<!--
body {
background-color: #ceddc8;
background-image: url(icons/zen.jpg);
background-repeat: no-repeat;
}
body,td,th {
color: #000000;
}
.Style3 {color: #CC0033}
-->
</style></head>
<body>
<div id="menu">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="index.html">HOME</a></li>
<li class="level1-li"><a class="level1-a fly" href="#url">RADIOLOGIE
</a>
<div>
<ul>
<li><a class="drop" href="#url">Locomoteur
</a>
<div>
<ul>
<li><a href="Radio-MI.html" target="corps">Membre Inf</a></li>
<li><a href="Radio-Ms.html"target="corps">Membre Sup</a></li>
<li><a href="Radio-Rachis.html"target="corps">Rachis</a></li>
</ul>
</div>
</li>
<li><a href="Radio-Divers.html"target="corps">Divers</a></li>
<li><a class="drop" href="#url"target="corps">Uro Digestif</a>
<div>
<ul>
<li><a href="Radio-Abdo.html"target="corps">Abdomen</a></li>
<li><a href="Radio-Pelvis.html"target="corps">Pelvis</a></li>
</ul>
</div>
</li>
<li><a href="Radio-Neuro.html"target="corps">Neuro</a>
<li><a href="Radio-A V.html"target="corps">Vasculaire</a></li>
<li><a href="Radio-Thorax.html"target="corps">Thorax</a></li>
<li><a href="Radio-Pediartrie.html"target="corps">Pédiatrie</a></li>
<li><a href="Radio-Ostéodensitometrie.html"target="corps">Ostéodensitométrie</a></li>
</ul>
</div>
</li>
<li class="level1-li"><a class="level1-a fly" href="#url">ECHOGRAPHIE
</a>
<div>
<ul>
<li><a class="drop" href="#url">Locomoteur
</a>
<div>
<ul>
<li><a href="Echographie-MI.html"target="corps">Membre Inf</a></li>
<li><a href="Echographie-Ms.html"target="corps">Membre Sup</a></li>
</ul>
</div>
</li>
<li><a href="Echographie-Interventionnelle.html"target="corps">Interventionnelle</a></li>
<li><a href="Echographie-Divers.html"target="corps">Divers</a></li>
<li><a class="drop" href="#url">Uro Digestif
</a>
<div>
<ul>
<li><a href="Echographie-Abdo.html"target="corps">Abdomen</a></li>
<li><a href="Echographie-Pelvis.html"target="corps">Pelvis</a></li>
</ul>
</div>
</li>
<li><a href="Echographie-Neuro.html"target="corps">Neuro</a>
<li><a href="Echographie-A V.html"target="corps">Vasculaire</a></li>
<li><a href="Echographie-Thorax.html"target="corps">Thorax</a></li>
<li><a href="Echographie-Pediartrie.html"target="corps">Pédiatrie</a></li>
</ul>
</div>
</li>
<li class="level1-li"><a class="level1-a fly" href="#url">SENOLOGIE
</a>
<div>
<ul>
<li><a href="Sénologie-Mammographie.html"target="corps">Mammographie</a></li>
<li><a href="Sénologie-Divers.html"target="corps">Divers</a></li>
<li><a href="Sénologie-Mammotome.html"target="corps">Mammotome</a></li>
</ul>
</div>
</li>
<li class="level1-li left"><a class="level1-a fly" href="#url">SCANNER
</a>
<div>
<ul>
<li><a class="drop" href="#url">Locomoteur
</a>
<!--[if lte IE 6]>
<table><tr><td>
<![endif]-->
<div>
<ul>
<li><a href="Scanner-MI.html"target="corps">Membre Inf</a></li>
<li><a href="Scanner-Ms.html"target="corps">Membre Sup</a></li>
<li><a href="Scanner-Rachis.html"target="corps">Rachis</a></li>
</ul>
</div>
<!--[if lte IE 6]>
</td></tr>
</table></a>
<![endif]-->
</li>
<li><a href="Scanner-Divers.html"target="corps">Divers</a></li>
<li><a class="drop" href="#url">Uro Digestif
</a>
<div>
<ul>
<li><a href="Scanner-Abdo.html"target="corps">Abdomen</a></li>
<li><a href="Scanner-Pelvis.html"target="corps">Pelvis</a></li>
</ul>
</div>
</li>
<li><a href="Scanner-Neuro.html"target="corps">Neuro</a>
<li><a href="Scanner-A V.html"target="corps">Vasculaire</a></li>
<li><a href="Scanner-Thorax.html"target="corps">Thorax</a></li>
<li><a href="Scanner-Pediartrie.html"target="corps">Pédiatrie</a></li>
</ul>
</div>
</li>
<li class="level1-li left"><a class="level1-a fly" href="#url">IRM
</a>
<div>
<ul>
<li><a class="drop" href="#url">Locomoteur
</a>
<div>
<ul>
<li><a href="IRM-MI.html"target="corps">Membre Inf</a></li>
<li><a href="IRM-Ms.html"target="corps">Membre Sup</a></li>
<li><a href="IRM-Rachis.html"target="corps">Rachis</a></li>
</ul>
</div>
</li>
<li><a href="IRM-Divers.html"target="corps">Divers</a></li>
<li><a class="drop" href="#url">Uro Digestif
</a>
<div>
<ul>
<li><a href="IRM-Abdo.html"target="corps">Abdomen</a></li>
<li><a href="IRM-Pelvis.html"target="corps">Pelvis</a></li>
</ul>
</div>
</li>
<li><a href="#url"target="corps">Neuro</a>
<li><a href="IRM-A V.html" target="corps">Vasculaire</a></li>
<li><a href="IRM-Neuro.html"target="corps">Thorax</a></li>
<li><a href="IRM-Pediartrie.html"target="corps">Pédiatrie</a></li>
</ul>
</div>
</li>
<li class="level1-li left"><a class="level1-a fly" href="#url">MESURES
</a>
<div>
<ul>
<li><a class="drop" href="#url">Radiologie
</a>
<div>
<ul>
<li><a href="Les Mesures-Radiologie-Membre inferieur.html"target="corps">Membre Inf</a></li>
<li><a href="Les Mesures-Radiologie-Membre supérieur.html"target="corps">Membre Sup</a></li>
<li><a href="Les Mesures-Radiologie-rachis.html"target="corps">Rachis</a></li>
</ul>
</div>
</li>
<li><a class="drop" href="#url">Echographie</a>
</a>
<div>
<ul>
<li><a href="Les Mesures-Echographie-Membre inferieur.html"target="corps">Membre Inf</a></li>
<li><a href="Les Mesures-Echographie-Membre supérieur.html"target="corps">Membre Sup</a></li>
</ul>
</div>
</li>
<li><a class="drop" href="#url">Scanner</a>
</a>
<div>
<ul>
<li><a href="Les Mesures-Scanner-Membre inferieur.html"target="corps">Membre Inf</a></li>
<li><a href="Les Mesures-Scanner-Membre supérieur.html"target="corps">Membre Sup</a></li>
<li><a href="Les Mesures-Scanner-rachis.html"target="corps">Rachis</a></li>
</ul>
</div>
</li>
<li><a class="drop" href="#url">IRM</a>
</a>
<div>
<ul>
<li><a href="Les Mesures-IRM-Membre inferieur.html"target="corps">Membre Inf</a></li>
<li><a href="Les Mesures-IRM-Membre supérieur.html"target="corps">Membre Sup</a></li>
<li><a href="Les Mesures-IRM-rachis.html"target="corps">Rachis</a></li>
</ul>
</div>
</li>
<li><a class="drop" href="#url">Pacs</a>
</a>
<div>
<ul>
<li><a href="Pacs.html"target="corps">Divers</a></li>
</ul>
</div>
</li>
</ul>
</div>
<li class="level1-li"><a class="level1-a fly" href="#url">EPU
</a>
<div>
<ul>
<li><a href="INTERVENTIONS EPU MEDECINS.html"target="corps">Médecins</a></li>
<li><a href="INTERVENTIONS EPU MANIPULATEURS.html"target="corps">Manipulateurs</a></li>
</ul>
</div>
</li>
</ul>
</div>
<p class="info"> </p>
</div>
</div>
</div>
<div id="corps"><iframe src="Untitled-2.html" frameborder="0" name="corps" width="900" height="auto" scrolling="auto" id="corps" allowtransparency="true" ></iframe>
</div>
</body>
</html>

gatsu35

Blablaté par Harko

[:vomi]

---------------
Blablaté par Harko

David Boring

En fait le code vient de chez stu nicholls, mais je trouve que le html est trop pénible juste pour éviter le javascript
http://www.cssmenus.co.uk/dropline.html

Mais pour répondre à la question, ce menu fonctionne très bien sur son site avec IE6
C'est donc ton intégration qui est mauvaise, mais à quelle moment ?!

Message cité 1 fois

gatsu35

Blablaté par Harko

David Boring a écrit :

je pensais plutot à celui de cssplay mais c'est le même auteur XD
Bon mon smiley [:vomi] resume ce que tu as dit

---------------
Blablaté par Harko

RICOTTE

j'ai résolu mon pb

j'ai intégrer un 2eme css pour ie6 avec quelques correctifs de code et c'est parfait

Code :

#menu ul {display:inline;}
#menu li:hover div ul li {display:inline;}
#menu :hover div ul :hover div ul li a {margin-left:-16px;}

par contre je rencontre un pb qui est une vraie colle : en effet mon anim flash ne fonctionne pas sur tous les postes avec ie8 alors que leurs config et options internet sont identiques

si vous avez des idées

peut être l'intégration de mon anim flash

merci de vos réponses

Code :

<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="396" height="365">
<param name="eanim" value="!e-anim:Rico">
<param name="movie" value="flash/ricobis1.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="flash/ricobis1.swf" width="396" height="365"
quality="high"
wmode="transparent"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
<object type="application/x-shockwave-flash" data="flash/ricobis1.swf" width="396" height="365">
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />

David Boring

Le plus propre, c'est d'employer swobject
http://code.google.com/p/swfobject/

FORUM HardWare.fr

Programmation

HTML/CSS

[resolu]compatibilité ie6 ie7 mais bug anim flash

Sujets relatifs
[Résolu] Problème de requête	Problème création site en flash
[RESOLU] pb vérification bouton radio formulaire - JS	collision de sprites : quelle direction donner après collision[résolu]
pb insertion champ vide dans BDD via formulaire (PHP/SQL) [Résolu]	chevauchement sous ie7 bon sur ie8 et ff
[php] Problème d'include et génération d'image (résolu)	[edit] probleme de submit
[RESOLU]Afficher le plus grand ID de plusieurs sous_id	[resolu] 1 menu pour toutes les pages d'un site ...
Plus de sujets relatifs à : [resolu]compatibilité ie6 ie7 mais bug anim flash

Page générée en 0.328 secondes