How do I create a transparent div over another div that contains google maps?

I am creating a site that uses google maps and I am trying to put a transparent div over the map. The only way I could get it done was this:

<div id="container" class="container">&nbsp;
    <div id="map_canvas" class="map"></div>
    <div id="over_map" class="over_map" ></div>
</div>
   However it has a bug. If you open the page in a IE tab, then move the focus to another IE, wait a few seconds, and go back to the initial tab, it looses the transparent efect. I have created a small test file so yo can see it better.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 
div.container {
	position:relative;
	width: 100%;
	height: 100%;
 
}
 
div.map {
	position:absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	z-index:1;
	background-color: red;
	}
div.over_map {
	position:absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	background-color: black;
	z-index:2;
	filter:alpha(opacity=50);
		-moz-opacity:0.5;
	opacity:0.5;
 
}
</style>
</head>
 
<body style="">
 
<table width="100%" height='100%' border="1" >
	<tr>
		<td width="20%"></td>
		<td width="80%">
			<div class="container">&nbsp;
				<div id="map_canvas" class="map">&nbsp;</div>
				<div id="over_map" class="over_map">&nbsp;</div>
			</div>
		</td>
	</tr>
</table>
</body>
</html>

Open in new window

ldeabreuAsked:
Who is Participating?
 
ldeabreuConnect With a Mentor Author Commented:
I found my own solution to this. I decided not to use the CSS opacity. Now I am using a transparent background and it works fine.

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
 
div.container {
	position:relative;
	width: 100%;
	height: 100%;
 
}
 
div.map {
	position:absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	z-index:1;
	background-color: red;
	}
div.over_map {
	position:absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	background: url(../images/1x1pixel.gif) repeat;
	z-index:2;
}
</style>
</head>
 
<body style="">
 
<table width="100%" height='100%' border="1" >
	<tr>
		<td width="20%"></td>
		<td width="80%">
			<div class="container">&nbsp;
				<div id="map_canvas" class="map">&nbsp;</div>
				<div id="over_map" class="over_map">&nbsp;</div>
			</div>
		</td>
	</tr>
</table>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.