[css] Stylesheet maakt m'n element onklikbaar in IE - Softwareontwikkeling

donderdag 12 mei 2005 14:43

Acties:

kloonikoon

Topicstarter

Alle code hier onder te vinden is hier te downloaden in 1 handig zip bestand.

Inleidinkje
Ik heb een menu gemaakt met een unordered list welke ik met een stylesheet netjes uit laat zien. Echter in deze list elementen staat een klikbare tekst en het list element zelf is niet klikbaar. Ik wilde dit graag oplossen omdat ik dat niet echt mooi vondt; het geheel is tenslotte een soort grote knop... Daarop heb ik een stuk javascript code geschreven dat onload het nodige event toe kent aan de juiste li elementen, oftewel een onclick. In Firefox leverde dit bij de eerste poging al het gewenste resultaat op maar Ie werkte niet mee. Uiteindelijk heb ik een stuk code gemaakt waarvan ik zeker weet dat de javascript ervan moet werken maar het werkt evengoed niet!

Om te kunnen testen waar mijn probleem zat heb ik een testcase gemaakt waarin alleen nog zit wat het probleem veroorzaakt.

To the point.
Als je in de onderstaande html op een menu-item klikt in het bovenste menu krijg je geen javascript alert. (niet op de tekst klikken maar in het blauwe gedeelte rechts!!) Echter in het onderste menu krijg je wel een melding als je op een blauw gedeelte klikt maar hier geven de grijze gedeeltes het verkeerde nummer terug!

Ik heb ontdekt dat als ik in mn css de twee width instellingen weg haal dat dan alles probleemloos werkt. Maar dan kan ik de breedte van mn menu niet meer instellen!! Zet ik er een div of iets dergelijks om het hele menu heen met een bepaalde grootte dan werkt het plotseling ook niet meer.

Aangezien het wel werkt in FF lijkt het me een vage bug in IE, ik lijk tenslotte niet te kunnen klikken op een wel zichtbaar item!! Ik heb zelf geen oplossing of workaround kunnen vinden (oa z-index geprobeerd) en ik hoop dat iemand weet waar deze vagigheid vandaan komt!

De code
Alle code hieronder heb ik aangepast en ook alle code nodig voor FF er uit gehaald. Dus niet proberen met FF het zal er niet mee werken!!

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

    <title>test1</title>

    <link rel="stylesheet" href="probleem.css" type="text/css">

    <script type="text/javascript" src="test.js"></script>

</head>

<body onload="fnInit();">

<div id="mainMenuContainer">
    <ul>
        <li id="item0"><a href="/home">Home</a></li>
        <li id="item1"><a href="/aboutus">About us</a></li>
        <li id="item2"><a href="/products">Products</a></li>
        <li id="item3"><a href="/careers">Careers</a></li>
        <li id="item4"><a href="/contactus">Contact us</a></li>
    </ul>

    <br>

    <ul>
        <li id="item5"><a href="/home">Home</a></li>
        <li id="item6"><a href="/aboutus">About us</a></li>
        <li id="item7"><a href="/products">Products</a>
        <ul>
            <li id="item8"><a href="/products/online">Online</a></li>
            <li id="item9"><a href="/products/cdrom">CD-ROM</a></li>
            <li id="item10"><a href="/products/books">Books</a></li>
        </ul></li>
        <li id="item11"><a href="/careers">Careers</a></li>
        <li id="item12"><a href="/contactus">Contact us</a></li>
    </ul>
</div>

</body>

</html>

Cascading Stylesheet:

#mainMenuContainer ul {
    margin           : 0;
    padding          : 0;
    width            : 161px;
    border-top       : 1px solid gray;
    border-left      : 1px solid gray;
    border-right     : 1px solid gray;
    background-color : blue;
}

#mainMenuContainer ul * {
    color            : #fff;
    text-decoration  : none;
}

#mainMenuContainer ul li {
    margin           : 0;
    padding          : 0;
    list-style-image : none;
    list-style-type  : none;
    border-bottom    : 1px solid gray;
    padding-left     : 4px;
    padding-bottom   : 1px;
}

#mainMenuContainer ul li a {
    margin-left      : 6px;
}

#mainMenuContainer ul li ul {
    width            : 100%;
    background-color : #eee;
}

#mainMenuContainer ul li ul * {
    color            : blue;
}

#mainMenuContainer ul li ul li {
    margin           : 0;
    padding          : 0;
    list-style-image : none;
    list-style-type  : none;
    border-top       : 1px solid gray;
    border-bottom    : 0;
    padding-left     : 10px;
    padding-bottom   : 1px;
}

JavaScript:

function fnGetMenuURL( oLi )
{
    oAnchor = oLi.getElementsByTagName( 'a' );

    for ( var i = 0; i < oAnchor.length; i++ ) {
        if ( oAnchor[i].href != '' ) {
            return oAnchor[i].href;
        }
    }
};

function fnInit()
{
    // Find the li elements and only add the events here
    oLi = document.getElementById( 'mainMenuContainer' ).getElementsByTagName( 'li' );

    for ( var i = 0; i < oLi.length; i++ ) {
        var mTest = new Function('alert(\''+oLi[i].id+'\'); event.cancelBubble = true;');
        oLi[i].attachEvent('onclick',mTest);
    }
};

[ Voor 13% gewijzigd door RwD op 12-05-2005 15:14 ]

donderdag 12 mei 2005 15:01

Acties:

r0bert

dit klopt niet heh

HTML:

1 2	<li id="item7"><a href="/products">Products</a></li> <ul>

HTML:

1 2	</ul></li> <li id="item11"><a href="/careers">Careers</a></li>

edit:lijkt het probleem alleen niet op te lossen

[ Voor 39% gewijzigd door r0bert op 12-05-2005 15:02 ]

donderdag 12 mei 2005 15:14

Acties:

RwD

kloonikoon

Topicstarter

oeps, dat heb ik er met de hand per ongeluk fout bij getypt. Want mn code valideert wel.

(ff gechecked, het is idd een handmatig foutje. Ik zal het in de startpost en de zip aanpassen)

donderdag 12 mei 2005 15:36

Acties:

Sappie

De Parasitaire Capaciteit!

RwD schreef op donderdag 12 mei 2005 @ 14:43:
Echter in deze list elementen staat een klikbare tekst en het list element zelf is niet klikbaar. Ik wilde dit graag oplossen omdat ik dat niet echt mooi vondt; het geheel is tenslotte een soort grote knop...

Geef je "#mainMenuContainer ul li a" eens een display: block;

Denk dat je dat javascriptje niet nodig hebt

Specs | Audioscrobbler

donderdag 12 mei 2005 15:40

Acties:

Verwijderd

zoals sappie zegt. en dan de paddings uit je ul li's halen en in je ul li a onderbrengen.

donderdag 12 mei 2005 16:08

Acties:

RwD

kloonikoon

Topicstarter

Sappie schreef op donderdag 12 mei 2005 @ 15:36:
[...]

Geef je "#mainMenuContainer ul li a" eens een display: block;

Denk dat je dat javascriptje niet nodig hebt

Toen ik jouw reply las dacht ik "*duh* wat kan ik lomp zijn

".

Maar het werkt niet voor #mainMenuContainer ul li ul li a

Deze geeft dan hetzelfde probleem als met de javascript; ik kan het element wel zien, maar ik kan er niet op klikken. Maar het probleem lijkt nu wel makkelijker oplosbaar

En Firefox kijkt me weer raar aan als ik zeg dat het op IE niet werkt

Verwijderd schreef op donderdag 12 mei 2005 @ 15:40:
zoals sappie zegt. en dan de paddings uit je ul li's halen en in je ul li a onderbrengen.

Jouw aanvulling snap ik niet precies, kun je duidelijker zijn welke ul en li's je bedoelt??

[ Voor 7% gewijzigd door RwD op 12-05-2005 16:08 ]

donderdag 12 mei 2005 16:25

Acties:

Sappie

De Parasitaire Capaciteit!

RwD schreef op donderdag 12 mei 2005 @ 16:08:
[...]
Toen ik jouw reply las dacht ik "*duh* wat kan ik lomp zijn ".

Maar het werkt niet voor #mainMenuContainer ul li ul li a Deze geeft dan hetzelfde probleem als met de javascript; ik kan het element wel zien, maar ik kan er niet op klikken. Maar het probleem lijkt nu wel makkelijker oplosbaar

De <a> tevens "position: relative" geven zal dit wel oplossen in IE denk ik.

[...]
Jouw aanvulling snap ik niet precies, kun je duidelijker zijn welke ul en li's je bedoelt??

De paddings toepassen op de <a> maakt dat het gehele vlak "clickbaar" is. Nu kun je op de linkse x pixels van de li niet clicken.

[ Voor 6% gewijzigd door Sappie op 12-05-2005 16:25 ]

Specs | Audioscrobbler

donderdag 12 mei 2005 16:40

Acties:

RwD

kloonikoon

Topicstarter

position:relative heeft het gefixed!

Ik dacht eigenlijk totdat ik het 5 seconden geleden nakeek dat 'relative' de standaard waarde was omdat elementen tenslotte relatief tov mekaar in je document staan. Beetje verbaasd zag ik dat de beginwaarde static is

Ik ga nu even met de padding aan de gang om het resultaat goed klikbaar te maken. Bedankt voor de hulp.

[ Voor 5% gewijzigd door RwD op 12-05-2005 16:40 ]

donderdag 12 mei 2005 16:42

Acties:

Sappie

De Parasitaire Capaciteit!

RwD schreef op donderdag 12 mei 2005 @ 16:40:
position:relative heeft het gefixed!

Ik dacht eigenlijk totdat ik het 5 seconden geleden nakeek dat 'relative' de standaard waarde was omdat elementen tenslotte relatief tov mekaar in je document staan. Beetje verbaasd zag ik dat de beginwaarde static is

tja.. IE works in mysterious ways.. die position: relative; zou er eigenlijk niet hoeven te staan, zoals ook te zien aan het feit dat het wel werkt in FF. (je geeft immers toch geen relatieve positie op.. dmv van bijv top & left)

[ Voor 8% gewijzigd door Sappie op 12-05-2005 16:44 ]

Specs | Audioscrobbler