Overlay Link.Works in IE7 and FF not IE6

A link in a YUI overlay isn't clickable in IE6

[Demaestro]

So I have an image on the front page of a website. I have some text in an overlay... using YUI overlay as the source. In that text are some links.... the links are not clickable in IE6.

Anyone have any experience with this happening to them?

I can open up the yahoo files in here if it would help to look at them.

<script language="javascript">
function do_overlay() {
var mainOverlay = new YAHOO.widget.Overlay("mainOverlay");
mainOverlay.cfg.setProperty("xy", [325, 50]);

var sencondaryOverlay = new YAHOO.widget.Overlay("sencondaryOverlay");
sencondaryOverlay.cfg.setProperty("xy", [650, 0]);
}
</script>

<div id="mainOverlay" style="height: 800px; width: 400px;">
<div style="color: #ffffff;">
<div style="align: center;"><img src="/images/rigpig_title.gif"></div>

<div style="font-size: 8pt; padding-top: 10px; padding-bottom: 15px;">
This website contains ......
By clicking to enter this site you agree that you are
legally able to view this type of content.
</div>

<div style="float: left;"><a href="/home.php">Enter Website</a></div>

<div style="float: right;"><a href="about:blank">Leave Website</a></div>

</div>
</div>
</div>

<div id="sencondaryOverlay">
<div style="font-size: 8pt; color: #ffffff;">
<span style="font-weight: bold;">The .... now has new </span>
<span style="font-weight: bold; font-size: 14pt;">extended hours!</span><br><br>

<table>
<tr>
<td>
MONDAY - THURSDAY
</td>
<td>
12:05 PM - 12:15 AM
</td>
</tr>
<tr>

<td>
FRIDAY
</td>
<td>
12:05 PM - 12:45 AM
</td>
</tr>
<tr>
<td>
SATURDAY
</td>

<td>
12:30 PM - 11:15 PM
</td>
</tr>
</table>
</div>
</div>

[SuzyUK]

Demaestro, I'm not sure about the code that is generating the overlay, but yes IE6 has problems if position relative is involved and stacking contexts clash..

first thing I'd try (troubleshooting the z-index), presuming the links you are speaking about are the 2 in your code...is

#mainOverlay a {position: relative; z-index: 10;}

the code sample you have here is working (links are clickable).. perhaps if you could separate out the generated code with image dimensions and post the appropriate HTML and CSS we could see more

Suzy

[Demaestro]

suzy... thanks for the reply

I just got this working now so i will post the solution in case anyone finds this via search and needs the answer.

What I did was got rid of the do_overlay() function and I replaced it with the following CSS definition.

<style type="text/css">

#mainOverlay {
position: absolute;
top: 50px;
left: 325px;
}
#sencondaryOverlay {
position: absolute;
top: 0px;
left: 650px;
}

</style>

It works and if someone has JS turned off it will still render for them as well.

[SuzyUK]

YW, and thanks for posting your solution

Glad you got it sorted! :)