---
title: "IE Png Fix + UL Meny"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/170676-ie-png-fix-ul-meny"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "MickeA.com"
published: "2008-04-10T10:07:55.000Z"
updated: "2008-04-10T18:38:53.000Z"
replies: 3
views: 657
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/170676-ie-png-fix-ul-meny"
---

# IE Png Fix + UL Meny

## #1 — MickeA.com, 2008-04-10T10:07Z

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!

Permalänk: https://www.webforum.nu/p/170676

## #2 — MickeA.com, 2008-04-10T10:16Z

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?

Permalänk: https://www.webforum.nu/p/2099929

## #3 — Palle, 2008-04-10T18:14Z

> **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>

Permalänk: https://www.webforum.nu/p/2100122

## #4 — MickeA.com, 2008-04-10T18:38Z

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.. :)

Permalänk: https://www.webforum.nu/p/2100130

---

Tråden på webben: https://www.webforum.nu/amne/html-css/170676-ie-png-fix-ul-meny