webForumDet fria alternativet

IE Png Fix + UL Meny

HTML & CSS

3 svar · 653 visningar · startad av MickeA.com

Medlem sedan feb. 20034 441 inlägg
Frågan#1

Hej,
Jag har ett litet knivigt problem.
Har en sajt som använder en UL lista som huvudmeny, enl. följande:

<div id="main-menu">
<ul>
	<li class="not-selected"><a href="http://mydomain.com/tabid/61/Default.aspx" title="Button">Button</a></li>
	<li class="selected"><a href="http://mydomain.com/tabid/83/Default.aspx" title="Button">Button</a></li>
	<li class="not-selected"><a href="http://mydomain.com/tabid/85/Default.aspx" title="Button">Button</a></li>
	<li class="not-selected"><a href="http://mydomain.com/tabid/84/Default.aspx" title="Button">Button</a></li>
	<li class="not-selected"><a href="http://mydomain.com/tabid/79/Default.aspx" title="Button">Button</a></li>
	<li class="not-selected"><a href="http://mydomain.com/tabid/172/Default.aspx" title="Button">Button</a></li>
</ul>
</div>

Den relaterade CSS'en ser ut såhär:

#main-menu {	
	/*  We are using a PNG for shadows. Fix this for IE6 */
	background: 		url(images/menu-bg.png) no-repeat;

	/* Using relative position to include the shadow */
	position: 			relative;
	
	/* Using relative position to include the shadow */
	left: 				-12px;

	width: 				778px;
	height: 			60px;	
}

#main-menu ul {
	margin: 			0;
	padding: 			7px 0 0 21px;
	clear: 				both;	
}

#main-menu li {
	display: 			inline;
	margin: 			0 0 0 1px;
}

#main-menu li.selected a {
	/* For current selected item */
	color: 				#333;

	font-weight: 		bold;	
	line-height: 		36px;

	/* So that we don't need to include uppercase letters in source. */
	text-transform: 	uppercase;
	text-decoration: 	none;
	display:			block;
	float:				left;
	width: 				121px;
	height: 			53px;
	text-align: 		center;
	background: 		url(images/menu-item-bg-selected.gif) no-repeat;
}

#main-menu li.not-selected a {
	color: 			#333;
	font-weight: 		bold;
	line-height: 		36px;

	/* So that we don't need to include uppercase letters in source. */
	text-transform: 	uppercase;
	text-decoration: 	none;

	display:			block;
	float:				left;
	width: 				121px;
	height: 			53px;
	text-align: 		center;
	background: 		url(images/menu-item-bg.gif) no-repeat;	
}

Menyn funkar jättebra överallt, men bakgrunden i #main-menu är en transparent png bild, därför har jag använt mig av TwinHelix IEPngFix (http://www.twinhelix.com/css/iepngfix/demo/).

Men, i samband med att bakgrunden blir transparent i IE, så slutar menyn att fungera helt och hållet. Precis som att det inte "finns" några länkar.
Har testat två olika sätt med transparenta PNG's i IE6, men med samma resultat. Det är dels den jag länkar till ovan och dels jQuery, som är ett javascript library med massa fina funktioner.

Någon som har några tankar kring det här, vill verkligen lösa det, tack!

Medlem sedan feb. 20034 441 inlägg
#2

Hej igen,
Sökte lite i det här forumet och hittade den här posten:
http://www.webforum.nu/showthread.php?t=150721

På min sajt har jag en speciell css som bara används av IE6 (och tidigare) och i den lade jag in:

div#main-menu {
	background: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='/Portals/BFS/Skins/main/images/menu-bg.png', sizingMethod='crop');
}

Då blir PNG'n transparent, men fortf. samma problem med att länkarna "försvinner".
Kan det vara så att PNG'n lägger sig ovanför min <ul> på något sjukt sätt?

Medlem sedan apr. 20003 174 inlägg
#3

http://24ways.org/ skrev:

There’s a bug/weirdness with AlphaImageLoader that sometimes prevents interaction with links and forms when a PNG background image is used.

ref: http://24ways.org/2007/supersleight-transparent-png-in-ie6

Medlem sedan feb. 20034 441 inlägg
#4

Aha, tack.
Jag tröttnade på strulet efter ett tag och gjorde om alla bilder till GIF, det funkar, men det ser lite sämre ut.

Inte mycket att göra åt, hoppas att IE6 dör ut inom kort.. :)

248 ms totalt · 4 externa anrop · v20260731065814-full.e96017d9
117 ms — deklarationer (db)
0 ms — hämta statistik (cache)
126 ms — hämta tråd, inlägg och bilagor (db)
118 ms — ändringar (db)