Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

[CSS] Menu ie bug

Pagina: 1
Acties:
  • 159 views sinds 30-01-2008
  • Reageer

Verwijderd

Topicstarter
Een vervelend probleempje met Internet Explorer. Ik ben bezig met een horizontaal uitklapbaar menu dmv CSS. In firefox gaat alles perfect alleen IE doet vervelend. Heb even twee plaatjes gemaakt om het duidelijker te maken wat mijn probleem is.

IE:
Afbeeldingslocatie: http://img340.imageshack.us/img340/9889/ieok4.jpg

FF:
Afbeeldingslocatie: http://img171.imageshack.us/img171/3245/ffgu0.jpg

Door middel van height:40px (de hoogte van het menu) toe te voegen aan de style van het <a> element verdwijnt de blauwe balk onder de buttons wel maar dan verplaatsen de sub items zich naar rechts van de parent. Iemand die hier een oplossing voor heeft? Het gaat trouwens om IE 7.

De css van het menu:

Cascading Stylesheet:
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
#menuh
    {
    font-size: small;
    font-family: arial, helvetica, sans-serif;
    width:100%;
    float:left;
    margin:0;
    padding: 0;
    }
        
#menuh a.top
    {
    text-align: center;
    display:block;
    margin:0;
    padding: 0;
    height: 40px;
    }

#menuh a
    {
    display:block;
    float: left;
    clear: left;
    }

#menuh li>a {
    float: none;
}
    
#menuh a, #menuh a:visited
    {
    color: white;
    background-color: royalblue;
    white-space:nowrap;
    text-decoration:none;
    }
    
#menuh a:hover  /* menu at mouse-over  */
    {
    color: white;
    background-color: cornflowerblue;
    }   

#menuh ul
    {
    list-style:none;
    margin:0;
    padding:0;
    }

#menuh li
    {
    position:relative;
    min-height: 1px;    /* Sophie Dennis contribution for IE7 */
    vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
    float: left;
    }

#menuh ul ul
    {
    position:absolute;
    z-index:100;
    top:auto;
    display:none;
    padding: 1em;
    margin:-1em 0 0 -1em;
    }
    
#menuh ul ul li
    {
    float: none;
    width: 100px;
    }

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

Verwijderd

Topicstarter
Iemand misschien nog een ideetje?

  • Rekcor
  • Registratie: Februari 2005
  • Laatst online: 08-10 13:03
heb je ook de html voor ons?

Verwijderd

Topicstarter
HTML:
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
<ul>
    <li><a href='http://192.168.1.61/index.php?page=1'><img src='images/nl/menu_home.gif' alt='Home' border=0 /></a></li>
    <li><img src='images/menu_sep.gif' alt='Menu Seperator' /></li>
</ul>
<ul>
    <li><a href='http://192.168.1.61/index.php?page=2'><img src='images/nl/menu_producten.gif' alt='Producten' border=0 /></a>
        <ul>
            <li><a href='Product een'>Product een</a></li>
            <li><a href='Product twee'>Product twee</a></li>
        </ul>
    </li>
    <li><img src='images/menu_sep.gif' alt='Menu Seperator' /></li>
</ul>
<ul>
    <li><a href='http://192.168.1.61/index.php?page=3'><img src='images/nl/menu_diensten.gif' alt='Diensten' border=0 /></a></li>
    <li><img src='images/menu_sep.gif' alt='Menu Seperator' /></li>
</ul>
<ul>
    <li><a href='http://192.168.1.61/index.php?page=4'><img src='images/nl/menu_formule.gif' alt='Formule' border=0 /></a></li>
    <li><img src='images/menu_sep.gif' alt='Menu Seperator' /></li>
</ul>
<ul>
    <li><a href='http://192.168.1.61/index.php?page=5'><img src='images/nl/menu_partners.gif' alt='Partners' border=0 /></a></li>
    <li><img src='images/menu_sep.gif' alt='Menu Seperator' /></li>
</ul>
<ul>
    <li><a href='http://192.168.1.61/index.php?page=6'><img src='images/nl/menu_referenties.gif' alt='Referenties' border=0 /></a></li>
    <li><img src='images/menu_sep.gif' alt='Menu Seperator' /></li>
</ul>
<ul>
    <li><a href='http://192.168.1.61/index.php?page=7'><img src='images/nl/menu_contact.gif' alt='Contact' border=0 /></a></li>
</ul>