Menu verspringt in IE 9 compatibiliteits modus

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Jeroen Spaans

Jeroen Spaans

10/11/2012 18:46:49
Quote Anchor link
Heey,

Ik ben momenteel bezig met een site echter heb ik wat problemen met mijn CSS dropdown menu.
In alle browsers werkt het menu gewoon normaal behalve als ik hem in IE 9 met compatibiliteitsmodus gebruik. Hij verspring om één of andere reden naar rechts en ik kan de oorzaak maar niet vinden.

Hieronder vind je het stukje CSS en HTML waar het omgaat en een afbeelding waar het fout gaat.

Zoals het menu hoort:
Afbeelding

Weergave in IE:
Afbeelding

De HTML:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
45
46
47
48
49
50
51
52
53
<div id="menu">
                <ul id="menu2">
                    <li>
                        <a href="#">Menu kop</a>
                        <span>Sub tekst</span>
                    </li>
                    <li>
                        <a href="#">Menu kop</a>
                        <span>Sub tekst</span>
                        <ul>
                            <li><a href="#">Sub 1</a></li>
                            <li><a href="#">Sub 2</a></li>
                            <li><a href="#">Sub 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Menu kop</a>
                        <span>Sub tekst</span>
                        <ul>
                            <li><a href="#">Sub 1</a></li>
                            <li><a href="#">Sub 2</a></li>
                            <li><a href="#">Sub 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Menu kop</a>
                        <span>Sub tekst</span>
                        <ul>
                            <li><a href="#">Sub 1</a></li>
                            <li><a href="#">Sub 2</a></li>
                            <li><a href="#">Sub 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Menu kop</a>
                        <span>Sub tekst</span>
                        <ul>
                            <li><a href="#">Sub 1</a></li>
                            <li><a href="#">Sub 2</a></li>
                            <li><a href="#">Sub 3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Menu kop</a>
                        <span>Sub tekst</span>
                        <ul>
                            <li><a href="#">Sub 1</a></li>
                            <li><a href="#">Sub 2</a></li>
                            <li><a href="#">Sub 3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>


De CSS

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
#menu    
{
    margin-right:0;
    margin-top: 0px;
}

#menu
{
    margin-right: 0px;
    margin-left:250px;
    background: #27a4cd;
    height: 50px;
    font-family: Verdana, Geneva, sans-serif;
}

#menu a, #menu a:hover
{
    text-decoration: none;
}

#menu li span
{
    font-size: 11px;
    color: #e3e3e3;
    font-weight: normal;
    padding: 20px ;
}

#menu2
{
    width: auto;
}
#menu2, #menu2 ul
{
    padding: 0;
    margin: 0;
    list-style: none;
}

#menu2 a
{
    display: block;
    line-height: 14px;
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-style: normal;
    color: #FFF;
}

#menu2 li:hover
{
    background: #267f8c;
    cursor: pointer;
}

#menu2 li:hover span
{
    color: #fff;  
}

#menu2 li
{
    float: left;
    font-size: 15px;
    font-weight: normal;
    padding-bottom: 11px;
    position: relative;
    display: block;
}

#menu2 li ul
{
    position: absolute;
    display: block;
    width: 188px;
    left: -999em;
    border: 1px solid #e7e7e7;
    border-width:0px 1px;
    margin-top:11px;
}

#menu2 li li
{
    font-weight: normal;
    margin: 0;
    padding: 0;
}

#menu2 li:hover ul
{
    left: auto;
    background: #FFF;
}

#menu2 li ul li a
{
    line-height: 32px;
    color: #4a4a4a;
    font-size: 12px;
    width: 148px;
    padding: 0 20px;
    border-bottom: 2px solid #e7e7e7;
}

#menu2 a
{
    display: block;
}

#menu2 li:hover
{
    position: static;
}
Gewijzigd op 10/11/2012 18:51:49 door Jeroen Spaans
 
Er zijn nog geen reacties op dit bericht.



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.