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é?

Syke · 2009-04-19, 18:58

Hej!

Prova att ta bort clear: left och ersätt med float: none i den del av css:en där du markerat att det blir fel.

Lindahl · 2009-04-19, 19:25

Förstår tanken, men för att det ska funka när jag gör på det sättet måste jag lägga till width: 100% på a-elementet också annars ballar det ur totalt av nån anledning. Tyvärr blir resultatet exakt detsamma efter denna förändring...

Lite skoj att man bara en halvtimme efter första posten får upp denna tråden som förstaträff på Google...

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>