Javascript menu

Door Bob Duisters op 03-03-2009 20:34

1.410 views

Beste forum bezoekers,

Ik heb een probleem met mijn website, bij mij doet mijn site het perfect maar bij andere niet. hieronder zie je een foto dat (rechts) de manier zoals het hoord, (links) zoals het niet hoort en het er bij 10% van de mensen uitziet.
ik heb de onderstaande javascript code gebruikt


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

Edit:
Zie hier mijn css:


#nav{
	width: 900px;
	height: 35px;
	margin: 0 auto;
	background: #CE9D27;
}

 #nav ul { 
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 25px;
}
#nav a {
	display: block;
	width: 10em;
	float: left;
	color : #FFFFFF;
	font-weight: bold;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	background-color: #CE9D27;
	border: none;
	padding: 2px;
}
#nav li a:hover {
	color : #000000;
	background-color : #CE9D27;
}
#nav li { 
	display: inline;
	text-transform: uppercase;
	float: left;
	width: 10em; 
}
#nav li ul { 
	position: relative;
	width: 10em;
	left: -999em; 
}
#nav li ul ul { 
	margin: -1em 0 0 10em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { 
	left: auto;
}

EDIT: Probleem opgelost!

Bob Duisters

06-03-2009 16:00

Niemand die hier het probleem van weet?

Greetz,

Onbekend Onbekend

06-03-2009 16:02

Welke browsers worden er gebruikt?

Edit: je site is ook niet valid.

Probleem zit niet in je css, maar in je html opbouw.

Je maakt toch een aantal fouten die de normale browsers niet goed weergeven, bijvoorbeeld:


  <ul>
    <li>Test</li>
    <li>
      <ul>
        <li>blab</li>
        <li>blab</li>
      </ul>
    </li>
  </ul>

Een ul in een ul moet dus altijd nog in een li tag staan, dan wordt de volgorde zo:
Ul > li > ul.

Leon Kunst

06-03-2009 16:03

Hmm is het niet zo dat die 10% firefox gebruikt?

Plaats us een klein stukje code (van 1 menuutje bijv)...

Yoram

06-03-2009 16:49

@leon 10% van wat gebruik firefox?

Maar je hebt waarschijnlijk loop het met je margin's niet helemaal lekker.. heb dit probleem ook gehad alleen geen idee meer hoe op te lossen. je zei dat hij in FF wel goed deed maar in IE niet.. Dan denk ik door de Margin's want IE is niet zo happy met die codes..

PS test ook eens voor IE6 dan sta je verstelt.. =)

Reageren

Inloggen om te reageren