[CSS] [javascript] verticaal drop down menu probleem in IE7 - Softwareontwikkeling

donderdag 18 oktober 2007 00:23

Acties:

blaap..

Topicstarter

Ik ben de afgelopen dagen bezig geweest met een verticaal drop down menu wat in alle algemene browsers werkt. echter had ik elke keer problemen met ie (altijd met ie7, soms deed ie6 ook "raar")

nu ben ik zover dat het in alle browsers werkt (zover ik weet) behalve ie7

een voorbeeld is te vinden op: http://essek.nl/me/Menu.htm
vergelijk ze in IE7 en in een willekeurig andere browser en je ziet het probleem.
Als je je muis over Item1 houdt zie je dat de lijst eronder van geen kanten klopt...

iemand enig idee wat dit kan zijn en hoe dit is op te lossen?

alvast heel erg bedankt!

de code:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang=en><HEAD><TITLE>Menu</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-15">
<STYLE type=text/css>

UL#menu {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-BOTTOM: 0px; 
    MARGIN: 0px; 
    PADDING-TOP: 0px; 
    LIST-STYLE-TYPE: none;
}

UL#menu LI UL {
    PADDING-RIGHT: 0px; 
    PADDING-LEFT: 0px; 
    PADDING-BOTTOM: 0px; 
    MARGIN: 0px; 
    PADDING-TOP: 0px; 
    LIST-STYLE-TYPE: none;
}

UL#menu {
    BORDER-RIGHT: black 1px solid; 
    BORDER-TOP: black 1px solid; 
    FLOAT: left; BORDER-LEFT: 
    black 0px solid; 
    BORDER-BOTTOM: black 1px solid;
}
UL#menu LI {
    FLOAT: left; 
    BORDER-LEFT: black 1px solid; 
    WIDTH: 123px; 
    BACKGROUND-COLOR: #808080; 
    margin: 0;
}

UL#menu LI A {
    PADDING-RIGHT: 4px; 
    DISPLAY: block; 
    PADDING-LEFT: 4px; 
    FONT-WEIGHT: bold; 
    FONT-SIZE: 13px; 
    PADDING-BOTTOM: 0px; 
    COLOR: white; 
    LINE-HEIGHT: 20px; 
    PADDING-TOP: 0px; 
    FONT-FAMILY: arial, tahoma, helvetica, sans-serif; 
    TEXT-DECORATION: none;
}

UL#menu LI A:hover {
    BACKGROUND-COLOR: #0000ff;
}

UL#menu LI UL {
    BORDER-RIGHT: black 1px solid; 
    BORDER-TOP: black 1px solid; 
    MARGIN-TOP: 0px; DISPLAY: none; 
    MARGIN-LEFT: -1px; 
    BORDER-LEFT: black 1px solid; 
    BORDER-BOTTOM: black 0px solid; 
    POSITION: absolute;
}

UL#menu LI UL LI {
    BORDER-LEFT-WIDTH: 0px; 
    FLOAT: none; 
    BORDER-BOTTOM: black 1px solid;
}

UL#menu LI UL LI UL {
    MARGIN-TOP: -18px; 
    MARGIN-LEFT: 100px;
}
</STYLE>

<!--[if lte IE 6]>
<STYLE type=text/css>

UL#menu LI UL LI {
    CLEAR: both; FLOAT: left;
}

UL#menu LI A {
    HEIGHT: 1%;
}
</STYLE>
<![endif]-->

<!--[if lt IE 6]>
<style type="text/css">

/* IE5.x boxmodel fixes */

ul#menu li ul li {
    width: 122px;
}

</style>
<![endif]-->
<SCRIPT type=text/javascript>

var menu = null;
function init_menu()
{
    menu = document.getElementById('menu');
    var li = menu.getElementsByTagName('li'), i = li.length;
    while (i--) li[i].onmouseover = showMenu;
    menu.onmouseout = timeout;
    menu.onmouseover = cleartimer;
}

var timer = null;
function timeout()
{
    timer = setTimeout('hideMenus(menu, null)', 1000);
}

function cleartimer()
{
    if (timer)
    {
        clearTimeout(timer);
        timer = null;
    }
}

function showMenu()
{
    var ul = this.parentNode;
    while (ul)
    {
        if (ul.tagName.toLowerCase() == 'ul')
        {
            hideMenus(ul, this);
            break;
        }

        ul = ul.parentNode;
    }

    ul = this.firstChild;
    while (ul)
    {
        if (ul.nodeType == 1 && ul.tagName.toLowerCase() == 'ul')
        {
            ul.style.display = 'block';
            ul.style.visibility = ''; // necessary for IE
            break;
        }

        ul = ul.nextSibling;
    }
}

function hideMenus(level, skipli)
{
    var stack = [level], i = 0, li, j, el, tag;
    do
    {
        li = stack[i].childNodes, j = li.length;
        while (j--)
        {
            el = li[j];
            if (el.nodeType == 1 && el != skipli)
            {
                tag = el.tagName.toLowerCase();
                if (tag == 'li')
                {
                    stack[i++] = el;
                }
                else if (tag == 'ul' && el.style.display == 'block')
                {
                    stack[i++] = el;
                    el.style.display = 'none';
                    el.style.visibility = 'hidden'; // necessary for IE
                }
            }
        }
    }
    while (i--);
}

</SCRIPT>

<META content="MSHTML 6.00.2900.3157" name=GENERATOR></HEAD>
<BODY>
<div id="menuDiv">
    <ul id=menu>
        <li>
            <A href="#">Item 1</A> 
            <ul>
                <li>
                    <A href="#">Item 1.1</A> 
                </li>
                <li>
                    <A href="#">Item 1.2</A> 
                </li>
                <li>
                    <A href="#">Item 1.3</A> 
                </li>
            </ul>
        </li>
        <li>
            <A href="#">Item 2</A> 
        </li>
        <li>
            <A href="#">Item 4</A> 
        </li>
    </UL>
</div>
<SCRIPT type=text/javascript>init_menu()</SCRIPT>
</BODY></HTML>

donderdag 18 oktober 2007 01:25

Acties:

Bee.nl

zoemt

Je moet je floats clearen met clear:both. Float:none lost dit niet voor je op.

Cascading Stylesheet:

1
2
3

ul#menu li ul li{
    clear:both;
}

Overigens kan je code een stuk netter/overzichtelijker. Je kan bijvoorbeeld alle paddings in 1 keer samenpakken door te zeggen padding:0, hetzelfde voor je borders en/of margins.

[ Voor 40% gewijzigd door Bee.nl op 18-10-2007 01:32 . Reden: toevoeging ]

donderdag 18 oktober 2007 13:24

Acties:

LocoShady

blaap..

Topicstarter

Bee.nl schreef op donderdag 18 oktober 2007 @ 01:25:
Je moet je floats clearen met clear:both. Float:none lost dit niet voor je op.
Cascading Stylesheet:
1
2
3
ul#menu li ul li{
    clear:both;
}
Overigens kan je code een stuk netter/overzichtelijker. Je kan bijvoorbeeld alle paddings in 1 keer samenpakken door te zeggen padding:0, hetzelfde voor je borders en/of margins.

als ik de aanpassing doe zoals jij deze zei, dan komen alle submenu items naast elkaar te staan ipv onderelkaar te staan.

zie http://www.essek.nl/me/MENU2.htm

donderdag 18 oktober 2007 13:32

Acties:

Bee.nl

zoemt

LocoShady schreef op donderdag 18 oktober 2007 @ 13:24:
[...]

als ik de aanpassing doe zoals jij deze zei, dan komen alle submenu items naast elkaar te staan ipv onderelkaar te staan.

zie http://www.essek.nl/me/MENU2.htm

Je hebt de code verkeerd overgetikt

.
Het is niet FLOAT: both; maar CLEAR: both;

maandag 22 oktober 2007 14:08

Acties:

LocoShady

blaap..

Topicstarter

Bee.nl schreef op donderdag 18 oktober 2007 @ 13:32:
[...]

Je hebt de code verkeerd overgetikt .
Het is niet FLOAT: both; maar CLEAR: both;

ach.. dat was een beetje dom

het klopt idd! nu werktie perfect, mijn dank is groot!