Toon posts:

[HTML/CSS] Krijg menu in IE niet goed

Pagina: 1
Acties:

Verwijderd

Topicstarter
Heb de volgende pagina..

In Firefiox doet ie het helemaal goed, maar in IE flipt het hele menu, als je een submenu (onder 'home' en 'service') wilt openen.. Heb van allerlei dingen geprobeerd met floats en positions, maar dat mocht niet baten..

Iemand een idee waar dit aan kan liggen??

Edit:
HTML:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ul class="mainMenu">
            <li style="width:95px;"><a href="#" class="navItem">Home</a>
            <ul class="navMenu">
                <li><a href="#" class="navItem">bla</a>
            </ul>       
          </li>
          <li style="width:110px;"><a href="#" class="navItem">Service en Garantie</a>
            <ul class="navMenu">
                <li><a href="#" title="Professioneel" class="navItem">Professioneel</a></li>
              <li><a href="#" title="Gebruiksaanwijzing" class="navItem">Gebruiksaanwijzing</a></li>
              <li><a href="#" title="Legitimatie" class="navItem">Legitimatie</a></li>
              <li><a href="#" title="Waarborgsom" class="navItem">Waarborgsom</a></li>
              <li><a href="#" title="Schade-afkoopregeling" class="navItem">Schade-afkoopregeling</a></li>
            </ul>
          </li>
          <li style="width:95px;"><a href="#" class="navItem">Verhuur</a></li>
          <li style="width:115px;"><a href="#" class="navItem">Algemene voorwaarden</a></li>
          <li style="width:120px;"><a href="#" class="navItem" style="border:0;">Werken bij Formido</a></li>
        </ul>

CSS:
code:
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
/* Hoofdmenu */
ul.mainMenu {
 margin: 7px 0 3px 10px; 
 padding: 3px 0;
 height: 46px;
 list-style: none;
}
html>body ul.mainMenu {
 height: 40px;
}
ul.mainMenu li {
 margin: 0;
 padding: 0;
 display:block;
 float: left;
 height: 40px; 
}
ul.mainMenu li.menu-last {
 border: 0;
}
ul.mainMenu li a {
 margin: 0;
 padding: 0;
 padding-top: 3px;
 display: block;
 height: 37px;
 text-align: center;
 font: 13px Verdana, Helvetica, Arial, Trebuchet MS,Serif;
 color: black;
 font-weight: bold;
 text-decoration: none; 
 border-right: 2px solid #fa0010;
}

/*          Sub Navigation
=========================================*/
ul.navMenu {
 padding-bottom: 3px;
 display: none;
 position: relative;
 top: 5px;
 left: -40px;
 border: 2px solid #fde502;
 height: auto;
 width: 150px; 
 z-index:3;
 background:#fb0111;
} 
html>body ul.navMenu {
 float: left;
 left: 0;
}
ul.navMenu li {
 margin: 0;
 padding: 0;
 display: block; 
 float: left;
 height: 24px; 
 border: 0;
}
ul.navMenu li a {
 margin: 3px 1px 0 0;
 padding: 3px 1px 3px 20px;
 clear: both;
 display: block; 
 height: 15px;
 width: 169px;
 font-size: 11px;
 text-align: left;
 font-weight: normal;
 text-decoration: none;
 color: white;
 background: #fb0111 url(../img/bullet.gif) no-repeat center left;
 border: 0;
}
html>body ul.navMenu li a {
 margin-left: -40px;
}
ul.navMenu li a:hover {
 background: #fde502 url(../img/star.gif) no-repeat center left;
 color: black;
}

.showMenu { display:block !important; }
.hasSubMenuActive {

}
.menuEnd { clear:both; }

[ Voor 112% gewijzigd door Verwijderd op 25-03-2005 14:38 ]


Verwijderd

Het zou wel prettig zijn als jij dan even de relevante code kan geven want ik heb niet zo'n zin dat allemaal na te pluizen :P

edit
zo is het al wat beter ja :)

[ Voor 16% gewijzigd door Verwijderd op 25-03-2005 14:52 ]


Verwijderd

Topicstarter
Het probleem is, wat ik zo kan bekijken, dat het submenu breder is dan het hoofdmenu, waardoor, als een submenu word geopend, de <ul> van het hoofdmenu dezelfde breedte krijgt als het submenu.. daardoor schuift de hele boel op..

Maar ik vind het gek dat dat gebeurt, omdat het gewoon aparte classes zijn, die elkaar niet in de weg zitten..

Verwijderd

Niet dat het daardoor komt maar je vergeet hier een <li> af te sluiten met </li>:
code:
1
2
3
            <ul class="navMenu">
                <li><a href="#" class="navItem">bla</a>
            </ul>

  • El_BingO
  • Registratie: Juli 2001
  • Laatst online: 22-04 10:47
Komt door je position relative van je navMenu denk ik. Die neemt ruimte in. Zodra je het zichtbaar maakt, gaat alles naar rechts. Dat is bij position absolute niet zo.
Maak hem absolute en probeer hem met margins goed te krijgen!

Verwijderd

Topicstarter
met absolute lukt dat niet, want dan staat hbet submenu altijd op dezelfde plek op de pagina.. dat gaat dus niet werken (en werkt dus ook niet)

  • Sappie
  • Registratie: September 2000
  • Laatst online: 27-04 07:10

Sappie

De Parasitaire Capaciteit!

Verwijderd schreef op vrijdag 25 maart 2005 @ 16:46:
met absolute lukt dat niet, want dan staat hbet submenu altijd op dezelfde plek op de pagina.. dat gaat dus niet werken (en werkt dus ook niet)
absoluut positioneren gebeurt ten opzichte van het absoluut of relatief gepositioneerde parent - element. Dit is dus niet noodzakelijk het body element en daardoor zeker geschikt voor een soortgelijk menu.

kijk maar es naar bijv. suckerfish menu's: http://www.google.nl/sear...&btnG=Google+zoeken&meta=

Verder.. ga je eerst maar es beter verdiepen in CSS (nofi), want dan wist je dit wel :)

[ Voor 32% gewijzigd door Sappie op 25-03-2005 19:05 ]

Specs | Audioscrobbler


Verwijderd

Verander het volgende eens in je CSS. Zo zou het volgens mij moeten werken
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
ul.navMenu {
    padding-bottom: 3px;
    position: absolute;
    top: auto;
    left: auto;
    margin-left:-40px;
    margin-top:5px;
    border: 2px solid #fde502;
    height: auto;
    width: 150px; 
    z-index:3;
    background:#fb0111;
} 

Verwijderd

Topicstarter
Hartstikke bedankt.. Deze code doet het idd (na wat kleine aanpassinkjes).. dan ben ik toch wel benieuwd wat ik nu fout deed, toen ik het zelf probeerde met position:absolute;

maar goed.. hij doet het nu.. tnx! ;)
Pagina: 1