Bug IE8 - Disposition des DIVs

**Gaetan_** · 20/07/2010, 09h18

Bonjour à tous,

Avant de poster ce message j'ai essayé de suivre les tutos, m'intéresser au z index mais sans succès.
Je m'explique j'ai un menu déroulant CSS et sous ce menu une DIV contenant un slide show.
Le menu déroulant passe au premier plan sous firefox et en arrière plan de mon slide show sous IE.

Voici les codes CSS, je fais court :

* Menu déroulant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
#menuhtc {background: #000; color: #6d6d6d; margin: 0; padding: 0;}
#menuhtc a, #menuhtc a:visited, #menuhtc a:hover {
   text-decoration: none;
   color: #6d6d6d;
 
  }
#menuhtc a:hover {
   text-decoration: none;
   color: #acabab;
   background: #000;
  }
 
#menuhtc ul { margin:0;padding:0; }
#menuhtc ul li {
   behavior:url('menu.htc');
   background: #000;
   position:relative;
   display:inline;
   font-size: 8pt; 
   padding:0px;
   cursor:pointer;
   text-align: left;
  }
#menuhtc ul>li { display:table-cell; }
#menuhtc ul li:hover { color: #acabab; }
#menuhtc ul li ul {
   top:expression(this.parentNode.offsetHeight+"px");
   left:expression(0);
   position:absolute;
   visibility:hidden;
  }
#menuhtc ul li:hover ul { visibility:visible; z-index:200; color: #acabab;}
#menuhtc ul li ul li { display:block;}

* Slide Show (issu de Flowplayer)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.images {
POSITION: relative; MARGIN: 0px; WIDTH: 660px; BACKGROUND: #000; FLOAT: left; HEIGHT: 443px; CURSOR: pointer; 
}
.images DIV {
POSITION: absolute; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; DISPLAY: none; HEIGHT: 443px; TOP: 0px; PADDING-TOP: 0px; LEFT: 0px
}
...

J'ai volontairement retiré mes z-index puisqu'ils ne fonctionnait pas je m'y suis surement mal pris. J'avais aussi essayé les csshover.htc ....

Bref je suis dans la panade et pas très doué il faut l'avouer pour le css.

Si une star du css pouvait m'aider ce serait super.

Un grand Merci

**eckerdecker** · 20/07/2010, 12h38

Bonjour,

Je sais pas si je suis une star du css mais si tu pouvais indiquer une adresse où on pourrait voir ça je pourrais peut-être t'aider

**Gaetan_** · 20/07/2010, 12h45

Bien sur.
voila le lien

**tsunamichups** · 20/07/2010, 12h57

DebugBar me sort une erreur javascript ...
Je suis gentil je te la donne

Ligne: 47
Caractère: 9
Code: 0
Message d'erreur: '0.style' a la valeur Null ou n'est pas un objet.
URL: http://www.guillaumepoli.net/menu.htc

J'ai noté aussi que ton site sur internet explorer 8, est interpréter comme le ferais ie5

problème de doctype peut être (mauvaise insertion )
J'utilise celui la personnellement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<!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">

Et ceci pour celui que tu utilise plutôt, il te manque la moiter de la declaration

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

regarde ca et vois si ca change quelque chose

(la foire au fautes youhou, pour une fois que je les vois)

**eckerdecker** · 20/07/2010, 13h00

Pour que ton z-index soit pris en compte il faut que tu spécifie au moins un position:relative sur ton div#menuhtc

**Gaetan_** · 20/07/2010, 13h06

Bonjour

Merci tout d'abord pour votre réactivité.

Les changements sont faits mais pas d'amélioration.

Z-index ?

**tsunamichups** · 20/07/2010, 13h14

Envoyé par Gaetan_

Bonjour

Merci tout d'abord pour votre réactivité.

Les changements sont faits mais pas d'amélioration.

Z-index ?

Au contraire il y en a une, ie8 et firefox réagisse de la même manière maintenant

, maintenant ont va pouvoir règler ton problème sans risquer le bug sur firefox

je pense que eckerdecker as raison pour le z-index et la position relative tu cible ta div qui apparait et tu lui colle ces deux instruction

ici il me semble

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#menuhtc ul li
{
...
}

**eckerdecker** · 20/07/2010, 13h16

En mettant un postion:relative sur le div id="menuhtc" qui a un z-index de 990 moi ça marche, en tout cas sur firefox.
Ce que je peux te conseiller c'est de mettre des "position:relative;z-index:2;" sur ta première <table> (où se trouve les menus) et "position:relative;z-index:1;" sur ta deuxième <table> (où se trouve ton diaporama)

Bug IE8 - Disposition des DIVs

CSS

Vue hybride

Discussions similaires

Partager

Partager