CSS menu wilt niet uitklappen in IE - Softwareontwikkeling

donderdag 12 oktober 2006 19:33

Acties:

Topicstarter

Ik heb een menu gemaakt in CSS, het probleem is dat het niet wilt uitklappen als ik hem bekijk met IE. Ik heb op internet gezocht naar menu's die andere mensen hebben gemaakt, maar na veel prutsen en code van andere mensen overnemen wil het me niet lukken om het werkend te krijgen. Waarschijnlijk zit er ergens een klein foutje waar ik steeds overheen kijk.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type='text/css'>
#menu {
    background-color: red; 
    width: 178px; 
    font-size: 0.75em; 
    text-align: center;
    padding: 0px 0px 5px 0px; 
    margin: 0px 0px 15px 6px; 
    text-align: left; 
    padding: 0px;   
}

ul.nav {margin: 0; padding: 0; list-style: none; width: 100%;}
ul.nav li {position: relative;}
ul.nav li {height: 25px; vertical-align: bottom;}
ul.nav li ul {position: absolute; left: 180px; top: 0; display: none; width: 230px; margin-left: -2px; padding: 0; }
ul.nav li a {display: block; text-decoration: none; color: black; background-color: transparent; padding: 5px; border-top: 1px solid #000000;}
ul.nav li a:hover { color: black; background: green; }
li ul.nav li a { background-color: yellow; color: black; padding: 5px;}
li:hover ul.nav, ul.nav { display: block; }
</style>
</head>

<body>

<div id="menu">
    <ul class="nav" > 
        <li class="nav"><a href="#">Bladiebla</span></a>
    
    <ul class="nav"> 
        <li><a href="#">link1?</a></li> 
        <li><a href="#">link2!</a></li> 
        <li><a href="#">Link3$</a></li>
    </ul>
    </li> 
</div>
</body>
</html>

donderdag 12 oktober 2006 19:38

Acties:

MrVulcan

Op het eerste gezicht mis je nog een sluitende ul-tag van je eerste nav-class.

donderdag 12 oktober 2006 19:41

Acties:

Alex)

En IE < 7 ondersteunt standaard alleen maar a:hover, daarvoor heb je een aparte htc nodig. Zoek maar eens naar 'suckerfish dropdown'

We are shaping the future

donderdag 12 oktober 2006 19:41

Acties:

Borizz

Okeanos schreef op donderdag 12 oktober 2006 @ 19:38:
Op het eerste gezicht mis je nog een sluitende ul-tag van je eerste nav-class.

Dit en er je hebt ook nog een span tag in je eerste menu (a) element staan die er niet thuis hoort.

Daar komt nog bij dat de :hover selector in IE(voor versie 7) alleen op A elementen werkt. Dus vandaar dat hij niet uit zal klappen. Je kan dit met javascript oplossen. Of je kan het Whatever:hover script gebruiken van Peter Nederlof.

If I can't fix it, it ain't broken.

donderdag 12 oktober 2006 19:41

Acties:

XWB

Devver

li:hover ul.nav, ul.nav { display: block; }

Dat kent IE niet, je hebt javascript nodig om dit werkend te krijgen.

/edit
spuit 2^31

/edit 2

Mogelijke oplossing:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type='text/css'>
#menu {
    background-color: red; 
    width: 178px; 
    font-size: 0.75em; 
    text-align: center;
    padding: 0px 0px 5px 0px; 
    margin: 0px 0px 15px 6px; 
    text-align: left; 
    padding: 0px;    
}

ul.nav {margin: 0; padding: 0; list-style: none; width: 100%;}
ul.nav li {position: relative;}
ul.nav li {height: 25px; vertical-align: bottom;}
ul.nav li ul {position: absolute; left: 180px; top: 0; display: none; width: 230px; margin-left: -2px; padding: 0; }
ul.nav li a {display: block; text-decoration: none; color: black; background-color: transparent; padding: 5px; border-top: 1px solid #000000;}
ul.nav li a:hover { color: black; background: green; }
li ul.nav li a { background-color: yellow; color: black; padding: 5px;}
li:hover ul.nav, ul.nav { display: block; }
</style>
<!--[if IE 6]>
<style type="text/css">
#menu li.over ul
{
    display: block;
}       
</style>
    
<script type="text/javascript">
over = function() 
{
    var liElements = document.getElementById('menu').getElementsByTagName('li');
    for (var i = 0; i < liElements.length; i++) 
    {
        liElements[i].onmouseover = function() 
        {
            this.className += ' over';
        }
        liElements[i].onmouseout = function() 
        {
            this.className = this.className.replace(new RegExp(' over\\b'), '');
        }
    }
}

window.attachEvent('onload', over); 
</script>
<![endif]-->
</head>

<body>

<ul class="nav" id="menu"> 
    <li class="nav"><a href="#">Bladiebla</a>
        <ul class="nav"> 
            <li><a href="#">link1?</a></li> 
            <li><a href="#">link2!</a></li> 
            <li><a href="#">Link3$</a></li>
        </ul>
    </li> 
</ul>

</body>
</html>

[ Voor 94% gewijzigd door XWB op 12-10-2006 19:54 ]

March of the Eagles

donderdag 12 oktober 2006 20:24

Acties:

Rowanov

Kop eens wat anders...

Dan is de whatever:hover oplossing toch een stuk eleganter, aangezien het geen extra vervuiling van je code oplevert om hem in dat stuk schoot van een IE6 ook werkend te krijgen

donderdag 12 oktober 2006 20:50

Acties:

Mercarra

Misschien dat het allemaal wel gaat werken, maar ik quote Crisp nog even van vorige week:
crisp in "[JS / CSS] Content laten veranderen op t..."

crisp schreef op woensdag 04 oktober 2006 @ 21:50:
[...]

CSS gebruiken voor behavior (zoals bijvoorbeeld de suckerfish dropdowns) is gewoon fout. [...]

Ik heb ook een suckerfish menu ooit gebruikt, en het is gewoon een enorme berg css voor iets heel simpels. Javascript werkt veel eenvoudiger en je kan bijvoorbeeld delays toevoegen.

[ Voor 19% gewijzigd door Mercarra op 12-10-2006 20:51 ]

Canon EOS 6D / Samyang 14mm f/2.8 / 17-40mm f/4.0 / 35mm f/1.4 / 50mm f/1.4 / 85mm f/1.8 / 70-200mm f/4 IS mercarra.nl

donderdag 12 oktober 2006 20:55

Acties:

Blaise

Ik denk dat het belangrijker is dat het goed werkt dan dat het semantisch niet geheel klopt, zeker omdat de alternatieven je code vervuilen en lastiger te implementeren zijn.

vrijdag 13 oktober 2006 00:24

Acties:

crisp

Devver

Pixelated

Blaise schreef op donderdag 12 oktober 2006 @ 20:55:
Ik denk dat het belangrijker is dat het goed werkt dan dat het semantisch niet geheel klopt, zeker omdat de alternatieven je code vervuilen en lastiger te implementeren zijn.

abstracties zijn altijd mogelijke pitfalls. Ik denk dat het belangrijker is dat je de techniek begrijpt dan dat je je laat beperken door abstracties ook al laten zich die misschien makkelijker implementeren

Intentionally left blank