Firefox/IE position:absolute;

Door Tijn op 03-07-2009 19:24

1.681 views

index.html


<html>

<head>
  <title></title>
  <style type="text/css" media="screen">
/**************** menu coding *****************/
body{
	background: #000;
}
#menu {
	z-index: 100;
	margin: 0;
	padding:0;
	position:absolute;
	width: 100%;
	float: left;
	font-family:verdana;
	font-size:12px;
	color: #FFF;
}
#menu a, a:visited, a:active{
	color: #FFF;
}
#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
}
#menu ul ul {
	position: absolute;
	background: #EEE;
	color: #000;
}
#menu ul li a:hover{
	text-decoration: underline;
}
div#menu ul li:hover ul{
	display: block;
}
div#menu ul ul {
	display: none;
}
#menu ul li ul{
	margin-left: 5px;
}
#menu ul li ul li a, a:visited, a:active{
	color: #000;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
body {
behavior: url(hover.htc);
}
</style>
<![endif]-->

</head>

<body>
<div id="menu">
<ul>
  <li>| Intro |
        <ul>
          <li><a href="#" >blablablablabla</a></li>
          <li><a href="#" >blablablablabla</a></li>
          <li><a href="#" >blablablablabla</a></li>
        </ul>
  </li>
</ul>

<ul>
  <li> <a href="#" >Een Goed Gevoel</a> |</li>
</ul>
<ul>
  <li> <a href="#" >Wij zijn Wij</a> |</li>
</ul>
<ul>
  <li> Onze Producten |
        <ul>
          <li><a href="#" >blablablablabla</a></li>
          <li><a href="#" >blablablablabla</a></li>
          <li><a href="#" >blablablablabla</a></li>
        </ul>
  </li>
</ul>
<ul>
  <li> <a href="#" >Het Goede Doel</a> |</li>
</ul>
<ul>
  <li> <a href="#" >Nieuws</a> |</li>
</ul>
<ul>
  <li> <a href="#" >Contact</a> |</li>
</ul>
<ul>
  <li> <a href="#" >Gastenboek</a> |</li>
</ul>
</div>
</body>

</html>

nu doettie de position bij firefox gewoon netjes eronder en bij internet explorer zettie m helemaal scheef:S er is iets met die #menu ul ul { in de CSS code denkik..

Jesper Diovo

03-07-2009 19:34

Wat is scheef?
Als je zelf al denkt dat het in de CSS code zit, waarom geef je dan ook nog eens heel je javascript?
IE en FireFox verschillen in vele opzichten van elkaar, zo ook in de manier van het behandelen van scripts. Probeer eens wat uit en kijk hoe beide browsers er op reageren, of Google erover.

Tijn

03-07-2009 19:41

Jaa hebbik allemaal gedaan, maar ik kan er nix over vinden op google..

die JS is idd niet egt nodig maar kijk zet maar eens deze:

div#menu ul ul {
display: none;
}

gewoon naar

div#menu ul ul {
/*display: none;*/
}

zodat die niks verbergt dan zieje dat die blabla wat er onder zou moeten komen met een mouseover in internet explorer helemaal ergens in het midden zit.. en bij firefox gewoon netjes eronder..

als ik dan bij #menu ul ul { de position verander in relative; dan word hij daar opzich recht weergeven maar wanneer dan de text in het submenuutje breeder is rektie alles helemaal uit en klopt het weer niet.

Tijn

06-07-2009 21:38

ah ik heb t opgelost:
door i.p.v.
behavior: url(hover.htc);
een gewone javascript functie te gebruiken:


<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Reageren

Inloggen om te reageren