[2.0][C#] Menu déroulant caché derrière un <div> sous IE6

**keuleu** · 20/11/2006, 10h28

J'ai un problème d'affichage des sous-items de mon menu sous internet explorer. Mon menu est placé dans un div (<div class="menuh">) lui-même positionné dans un header (<div class="header">). Ma page web est constituée d'une zone d'en-tête et d'une zone d'affichage (<div class="page").

Ca marche sans problèmes sous Mozilla, mais avec IE les sous-items sont cachés sous ma zone d'affichage (<div class="page">)

Voila le code de ma masterpage :

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
 
<body style="width: 700px; height: 500px;">
    <form id="form1" runat="server">
 
    <div class="header">
        <div class="menuh">
            <asp:Menu ID="Menu1" runat="server"
                DataSourceID="SiteMapDataSource1" Font-Names="Showcard Gothic" Font-Size="10pt"
                ForeColor="Black" Orientation="Horizontal" StaticDisplayLevels="2" DynamicHorizontalOffset="30" style="visibility: visible; overflow: visible; cursor: hand">
                <DynamicItemTemplate>
                    <%# Eval("Text") %>
                </DynamicItemTemplate>
                <DynamicMenuItemStyle BackColor="#FFFFC0" Font-Names="Showcard Gothic" Font-Size="10pt" CssClass="dynitem" />
                <StaticItemTemplate>
                    <%# Eval("Text") %>
                </StaticItemTemplate>
            </asp:Menu>
        </div>
    </div>
    <div class="page">
... etc

Et une partie de mon stylesheet :

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
35
36
37
38
39
40
41
42
43
44
 
.header
{
    background-image: url(img/Header.gif);
    background-repeat: no-repeat;
    position: relative;
    width: 700px;
    height: 115px;
    margin-left: auto;
    margin-right: auto;
    font-weight: normal;
    border-right: black thin solid;
    border-top: black thin solid;
    border-left: black thin solid;
    border-bottom: black thin solid;
}
 
.page
{
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    width: 700px;
    height: 400px;
    background-image: url(img/back-repeat.gif);
    background-repeat: repeat-y;
    position: absolute;
    border-right: black thin solid;
    border-top: black thin solid;
    border-left: black thin solid;
    border-bottom: black thin solid;
    top: 120px;
}
 
.menuh
{
    position: relative;
    float: right;
    margin-right: 15px;
    top: 95px;
    height: auto;
    clear: none;
    overflow: visible;
}

Merci de votre aide...

**jake84** · 20/11/2006, 20h58

Salut, j'ai eu exactement le meme probleme que toi aujourd'hui, et j'ai retiré la ligne position: absolute; de la classe .page et mon menu s'affiche par dessus mon div.

En espérant que ca marche pour toi aussi

Good Luck