I have a google map in an iframe and wrapped in a div. Above that div, i have another, which serves to create a recessed shadow effect.

The problem is that this overlayed div will take priority of any mouse events, so it renders the interactive google map below useless. There must be a way I can make the overlayed div ignore mouse events, letting the div below get them. (please, please!)

Or, is there another way to do it?

here's the code being output:

<div id="pageWrapper" style="display: block; ">
    <div class="page_content">
        <div id="pageShadow"></div>
        <div id="pageMap"><p><iframe width="1096" height="462" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Baked+Beans+B.V.+i.o.,+Amsterdam,+Nederland&amp;sll=52.365721,4.891641&amp;sspn=0.008648,0.022724&amp;ie=UTF8&amp;hq=baked+beans+bv+io&amp;hnear=Amsterdam,+North+Holland,+The+Netherlands&amp;ll=52.363837,4.891109&amp;spn=0.01664,0.045447&amp;z=14&amp;iwloc=near&amp;cid=2617758725349562441&amp;output=embed"></iframe></p>
</div>
    </div>

    <div id="page_description">
        <p>Text about the company</p>
    </div>

    <div id="page_credits">

        <div class="recTitle">Job 1</div>
        <div class="recJob"><p>Description</p>
</div>

        <div class="recTitle">Job 2</div>
        <div class="recJob"><p>Description</p>
</div>

        <div class="recTitle"></div>
        <div class="recJob"></div>

    </div>

</div>

Here's the relevant CSS:

#pageWrapper {
position: relative;
}

.page_content {
max-height: 462px;
position: relative;
}

#pageShadow {
posit
html css google-maps overlay mouseevent
Edit
Report