rpbtz rpbtz - 10 days ago 6
CSS Question

How to disable links in iframe using z-index?

I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.

So far my css looks like this:

<style type="text/css">

iframe
{

z-index:-1;
}

.bgimg {
background-image: url('transparent.png');
}


</style>


and my html like this:

<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">

<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>

</div>


I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.

I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).

If anyone has any alternative solutions to what I'm doing now - please let me know.

Answer

Keep in mind that z-index only works for positioned elements (can be relative though.)

See: http://www.w3.org/TR/CSS21/visuren.html#z-index:

Applies to: positioned elements