IE <= 7 ignorerar width i <LI>

Lindahl · 2009-04-19, 18:07

Har ett besynnerligt problem som jag inte kommer på en lösning till. Det är nämligen så att IE6 och IE7 ignorerar width på <LI>-element. Däremot funkar det finfint i Firefox och IE8. Har försökt strippa ner koden så gott det går, problemet ligger i den delen av CSS:en jag markerat.

Det är alltså en Suckerfish-meny jag vill få till, med en hover-effekt så att bakgrundsfärgen ändras när man håller musen över. Problemet visar sig genom att hela raden inte markeras.

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<style>	
 *ul, li {
 *	padding: 0px;
 *	margin: 0px;
 *	list-style: none;
 *}

 *#nav a {
 *	display: block;
 *}
 *
 *#nav li {
 *	float: left; 
 *}
 *
 *#nav li ul {
 * *position: absolute;
 *	left: -999em;
 *	border: 1px solid #808080;
 *}

 *#nav li:hover ul, #nav li.sfhover ul { 
 *	left: auto; 
 *}

 *#nav li:hover, #nav li.sfhover {
 *	background-color: #efefef;	
 *}
 *
 *#nav ul li {
 *	clear: left;
 *	display: block;
 *	width: 100%;   /* Här blir det fel */
 *}

	</style>

	<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>
</head>
<body>

	<ul id='nav'>
 *<li><a href='./'>Flygplan</a><ul>
 *	<li><a href='#'>Boeing</a></li>
 *	<li><a href='#'>Airbus</a></li>
 *	<li><a href='#'>Fokker</a></li>
 *</ul></li>
 *<li><a href='#'>Bilar</a><ul>
 *	<li><a href='#'>Volvo</a></li>
 *	<li><a href='#'>Saab</a></li>
 *	<li><a href='#'>Koenigsegg</a></li>
 *</ul></li>
 *<li><a href='#'>Mopeder</a><ul>
 *	<li><a href='#'>Zündapp</a></li>
 *	<li><a href='#'>Puch</a></li>
 *	<li><a href='#'>Suzuki</a></li>
 *</ul></li>
	</ul>

</body>
</html>

Någon som har nån idé?

Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)

Menu

IE <= 7 ignorerar width i <LI>