---
title: "Opacity problem i IE"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/163119-opacity-problem-i-ie"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "kraeftan"
published: "2007-08-01T22:12:05.000Z"
updated: "2007-08-14T06:32:06.000Z"
replies: 12
views: 912
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/163119-opacity-problem-i-ie"
---

# Opacity problem i IE

## #1 — kraeftan, 2007-08-01T22:12Z

Har gjort en sida med opacity på imap och. 

I IE så funkar inte imapen om jag har opacity på den.
Var kan felet ligga?

url till sidan det handlar om <http://www.djdragonfly.se/Stachmo/index.php>

**"Index" sidan under där imapen befinner sig:**

```

body {
background-color:#FFFFFF;
font-family: Verdana; font-size: 12px;
overflow-x:hidden;
overflow-y:scroll;
}
	{
	margin:0px;
	overflow:hidden;
	background:#000000;

}

table.bildmeny td img.menyknapp	{
	cursor:pointer;
}

td.menyknapp	{
	cursor:pointer;
}
</style>

<script src="sleight.js"></script>
</head>
<body>

<td align="center" style="background-image:url('gfx/bg.jpg');background-position:absolute:top center;background-repeat:no-repeat;padding:0px 0px 0px 0px;">

<br>
						<!-- BILDMENY START -->
						<table width="550" cellspacing="0" cellpadding="0">
							<tr>
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map">
<map name="meny_Map">
<area shape="rect" alt="" coords="538,13,592,28" href="gastbok.php" target="main">
<area shape="rect" alt="" coords="464,13,527,28" href="contact.php" target="main">
<area shape="rect" alt="" coords="365,13,453,28" href="downloads.php" target="main">
<area shape="rect" alt="" coords="307,13,354,28" href="games.php" target="main">
<area shape="rect" alt="" coords="241,13,296,28" href="photos.php" target="main">
<area shape="rect" alt="" coords="162,13,231,27" href="members.php" target="main">
<area shape="rect" alt="" coords="108,13,152,28" href="media.php" target="main">
<area shape="rect" alt="" coords="57,13,97,28" href="news.php" target="main">
</map>
<!-- BILDMENY SLUT -->
```

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

## #2 — tanten, 2007-08-11T06:13Z

Jag gissar att det är IE6 du skriver om
Försök med detta...
Lägg denna i head 

```
<!--[if lte IE 6]>
<style type="text/css">
.byt{
  opacity: 0.5;
  filter: alpha(opacity = 50);
}
</style>
<![endif]-->
```

Och sedan sätter du class="byt" på dina bilder.
Kanske fungerar det.
Men du måste då ta bort j.s-länken också, för det är där felet finns att länkarna inte fungerar.
Om inte prova med j.s. forumet... kanske kan någon se i ditt j.s-script vad som inte fungerar.

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

## #3 — kraeftan, 2007-08-11T16:14Z

Allt omkring funkar bra i IE 6 förutom imapen. När jag tog bort js scriptet så försvann opacity från knappmenyn. Men jag har provat \<td class="byt"\> på allt annat o det funkar. Men det vill inte på imapen :( jag har gjort så här iaf titta nedan vet inte om det är rätt.

```
<td class="byt">
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map">
<map name="meny_Map">
<area shape="rect" alt="" coords="538,13,592,28" href="gastbok.php" target="main">
<area shape="rect" alt="" coords="464,13,527,28" href="contact.php" target="main">
<area shape="rect" alt="" coords="365,13,453,28" href="downloads.php" target="main">
<area shape="rect" alt="" coords="307,13,354,28" href="games.php" target="main">
<area shape="rect" alt="" coords="241,13,296,28" href="photos.php" target="main">
<area shape="rect" alt="" coords="162,13,231,27" href="members.php" target="main">
<area shape="rect" alt="" coords="108,13,152,28" href="media.php" target="main">
<area shape="rect" alt="" coords="57,13,97,28" href="news.php" target="main">
</map></td>
```

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

## #4 — Quid, 2007-08-11T16:18Z

Kan du inte sätta class på img-taggen istället?

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

## #5 — tanten, 2007-08-11T16:29Z

```
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map">
<map name="meny_Map" class="byt">
```

Men så har du fått det lite tokigt i head.
lägg till slut på kommentaren sist
\</style\>
\<!\[endif\]--\>  \[1\] såg att jag inte fick med hela när jag klistrade...
och vad vill du med detta?

```
body {
background-color:#FFFFFF;
font-family: Verdana; font-size: 12px;
overflow-x:hidden;
overflow-y:scroll;
}
	
	margin:0px;
	overflow:hidden;
	background:#000000;

}
```

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

## #6 — tanten, 2007-08-11T16:55Z

Om du tittar i FF så kan du se att du kommenterat bort allt ner till
\<!-- TOPMENY START --\>
Vilket gör att ingenting fungerar annat än i IE6 nu om du undrar.

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

## #7 — kraeftan, 2007-08-11T21:30Z

Här är hela index filen, problemet kvarstår när det gäller imapen i IE. Kan ni kontrollera så allt stämmer nedan.

```
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>Stachmo</title>

<!--[if lte IE 6]>
<style type="text/css">
.byt{
  opacity: 0.6;
  filter: alpha(opacity = 60);
}
</style>
<![endif]--> [1]

<style>

body {

table.bildmeny td img.menyknapp	{
	cursor:pointer;
}

td.menyknapp	{
	cursor:pointer;
}

</style>

</head>

<body>

<table align="center" height="0%" cellspacing="0" cellpadding="0">
	<tr valign="center">
		<td>
			<table style="width:1024px;height:900px;">
				<tr>
					<td align="center" style="background-image:url('gfx/bg.jpg');background-position:absolute:top center;background-repeat:no-repeat;padding:0px 0px 0px 0px;">
						<!-- TOPMENY START -->
						<table width="550" cellspacing="0" cellpadding="0">
							<tr>
								<td class="byt">
								<img src="gfx/topen1.png" onmouseover="src='gfx/topen1.png'" onmouseout="src='gfx/topen1.png'" onclick="_self.location.href='index.php'" width=650 height=117></td>
							</tr>
						</table>
						<!--TOPMENY SLUT -->
					<br>
						<!-- BILDMENY START -->
						<table width="550" cellspacing="0" cellpadding="0">
							<tr>
								<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map">
								<map name="meny_Map" class="byt">
								<area shape="rect" alt="" coords="538,13,592,28" href="gastbok.php" target="main">
								<area shape="rect" alt="" coords="464,13,527,28" href="contact.php" target="main">
								<area shape="rect" alt="" coords="365,13,453,28" href="downloads.php" target="main">
								<area shape="rect" alt="" coords="307,13,354,28" href="games.php" target="main">
								<area shape="rect" alt="" coords="241,13,296,28" href="photos.php" target="main">
								<area shape="rect" alt="" coords="162,13,231,27" href="members.php" target="main">
								<area shape="rect" alt="" coords="108,13,152,28" href="media.php" target="main">
								<area shape="rect" alt="" coords="57,13,97,28" href="news.php" target="main">
								</map></byt>
						<!-- BILDMENY SLUT -->
							</tr>
						</table>
					<br>
						<!-- IFRAME START -->
						<table width="650" cellspacing="0" cellpadding="0">
							<tr>
								<td class="byt">
								<iframe src="news.php" name="main" width="650" height="420" scrolling="auto" frameborder="0" allowtransparency="true">
								</iframe></td>

				                        </tr>
	
						</table>
						<!--IFRAME SLUT -->

					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

</html>
```

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

## #8 — tanten, 2007-08-12T07:27Z

Jätteledsen... men ser nu att jag skrev fel när jag kopierade  din img. det var meningen att class skulle komma inne i den. Ögat lurades förmodligen av "meny_Map"  :r 
så prova med att ändra detta till

```
<td class="byt">
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map">
<map name="meny_Map">
```

till

```
<td>
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map" class="byt">
<map name="meny_Map">
```

Så hade du fått med \[1\] när du kopierade min kod till css:en. Var meningen att det skulle ha blivit liten text där, här på sidan.
Uppe i css ska du ändra \<style\> till \<style type="text/css"\>

```
body {
table.bildmeny td img.menyknapp	{
	cursor:pointer;
}
```

Fortfarande fel... men behöver du använda classen? Och ska du inte ange något för body som sedan måste ha en }sist. innan table.bil...osv. börjar.

Sedan finns det mycket fel i din kod som har att göra med vad som är tillåtet och inte, vad man inte bör göra osv, men det gällde ju inte din fråga...  men innan du kommer för långt så råder jag dig att använda Doctype och kolla sidan i en validator så det blir rätt från början.

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

## #9 — kraeftan, 2007-08-13T02:06Z

hehe när jag använder validatorn så får jag typ kasta halva sdan o massa saker försvinner. Hm hur mycket ska jag kasta bort från sidan?

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

## #10 — tanten, 2007-08-13T07:39Z

Nu gjorde jag så att jag fixade till din kod så att den validerar för den "snällaste" doctypen, så du kan se vad du gör under tiden du jobbar. 
Jag gissar att du hittade det du gjort på webdesignskolan... och man ska nog tänka till minst tio gånger innan man använder deras tutorials skarpt. Får en känsla av att de gjorde mycket på 90-talet som de sedan inte ändrat för att de ska passa till dagens standard.
Läs vidare om varför man **inte** ska använda tabeller för design, varför man inte bör använda bilder i menyn.
Byt gärna ut den doctypen som jag använt till

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
eller
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
```

och se vad det är som blir fel och jobba vidare med den, så lär man sig mycket under tiden.
Kan säga att de fel du får är sådant som så småningom kommer att försvinna... s.k. deprecated element,sådant som border, align m.fl.
cellspacing och cellpadding, som också hör dit tog jag bort och lade in i css i stället för att visa dig ett alternativ.

```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>Stachmo</title>
<!--[if lte IE 6]>
<style type="text/css">
.byt{
  opacity: 0.6;
  filter: alpha(opacity = 60);
}
</style>
<![endif]-->
<style type="text/css">
table{
	margin:0 0 20px 0;
	padding: 0px;
}
</style>
</head>
<body>
<table>
<tr>
	<td>
	<table style="width:1024px;height:900px;">
				<tr>
					<td class="bg" align="center" style="background-image:url('gfx/bg.jpg');background-position:absolute:top center;background-repeat:no-repeat;padding:0px 0px 0px 0px;">
						<!-- TOPMENY START -->
						<table>
							<tr>
								<td>
								<img src="gfx/topen1.png" onmouseover="src='gfx/topen1.png'" onmouseout="src='gfx/topen1.png'" onclick="_self.location.href='index.php'" width=650 height=117  class="byt" alt=""></td>
							</tr>
						</table>
						<!--TOPMENY SLUT -->
					
						<!-- BILDMENY START -->
						<table>
							<tr><td>
								<img src="gfx/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map"  class="byt">
								<map name="meny_Map">
								<area shape="rect" alt="" coords="538,13,592,28" href="gastbok.php" target="main">
								<area shape="rect" alt="" coords="464,13,527,28" href="contact.php" target="main">
								<area shape="rect" alt="" coords="365,13,453,28" href="downloads.php" target="main">
								<area shape="rect" alt="" coords="307,13,354,28" href="games.php" target="main">
								<area shape="rect" alt="" coords="241,13,296,28" href="photos.php" target="main">
								<area shape="rect" alt="" coords="162,13,231,27" href="members.php" target="main">
								<area shape="rect" alt="" coords="108,13,152,28" href="media.php" target="main">
								<area shape="rect" alt="" coords="57,13,97,28" href="news.php" target="main">
								</map>
							</td></tr>
						</table>
					<!-- BILDMENY SLUT -->
						<!-- IFRAME START -->
						<table>
							<tr>
								<td class="byt">
								<iframe src="news.html" name="main" width="650" height="420" scrolling="auto" frameborder="0">
								</iframe></td>
				                        </tr>
							</table>
						<!--IFRAME SLUT -->
					</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</body>
</html>
```

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

## #11 — zcorpan, 2007-08-13T18:57Z

Testa lägga bilden bakom usemap-\<img\>n, och ändra usemap-\<img\>n till en transparent gif så man ser den riktiga bilden som ligger bakom.

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

## #12 — kraeftan, 2007-08-14T04:38Z

nu hajjar jag inte vad du menar bakom? kan du visa ett exempel genom kod?

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

## #13 — tanten, 2007-08-14T06:32Z

Ser att menybilden finns i gfx/bilder/meny.png.
Och kanske är det så att detta inte fungerar i alla webläsare och att  då fungerar det med en gif-bild, som zcorpan säger.
Finns ställen på nätet där man kan få en screenshot på sidan, om folk här på forumet inte säger till... :-)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/163119-opacity-problem-i-ie
