Thread: Entire div as link over iframe: works in FF but not IE??

So, I'm managing a wiki and we'd like the entire mini-view calendar from our calendar app which is displayed in the side bar to act as a link to the main calendar page with the full size calendar, because if you try to actually use it with the mini-calendar in the iframe it won't be displayed correctly and everything gets cut off.

I know this might not be strict html, but here's what I've gotten to work quite well in firefox so far:
first i set a style sheet in the html head file that loads with every page:

HTML Code:

<style type="text/css">
div.iframe-link {
position: relative;
float: left;
width: 175px;
height: 205px;
margin: 0 1em 1em 0;
}
a.iframe-link {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style> 

then in the sidebar code, i just put a div around the mini-calendar page in an i-frame, with the style that i specified above, and a link to where i want it to go. (note: i didn't write this code myself, its adapted from something i found on another forum, but i thought i knew what it was doing)

HTML Code:

<table><tr><td><div class="iframe-link">
<iframe src="mini_calendar.asp?style=sandbeach" style=" border-width:0 " width="175" height="175" frameborder="0" scrolling="no"></iframe><a href="Calendar.ashx" class="iframe-link"></a>
</div></td></tr></table> 

it works in firefox, but doesn't in IE 8. in firefox it does what its supposed to do and makes the entire mini_calendar.asp iframe a link that goes to calendar.ashx, in IE it only makes the background of mini_calendar.asp a link while the foreground links still make the asp page try to load other calendar asp pages in the tiny iframe

i believe it might've worked in IE when the iframe was linking to a mini goolgle calendar instead of our own asp calendar, but i'm not 100% on that. i should go back and check though.

maybe i should try moving around the order of the <div> and the <a> tags, i think i maybe even had them outside the table cell at one point which is why that one-cell table is in there.

I don't know if this would work or if you want to rely on a JS solution, but how about adding an onclick event to the div?

Code:

<div class="iframe-link" onclick="document.location.href='Calendar.ashx';"> 

Not sure how that works when an IFRAME is embedded in the div but might be worth a go.

it didn't work.... same result.

Try wrapping your <a> tags around the iframe and see if that works any better.

Hey, at least it did something different. Can you change the mini_calendar.asp at all or is that a 3rd party program? Wondering if you could cause IT to redirect to the other calendar program (but that would probably break it everywhere else too).

Originally Posted by Wolffy

Hey, at least it did something different. Can you change the mini_calendar.asp at all or is that a 3rd party program? Wondering if you could cause IT to redirect to the other calendar program (but that would probably break it everywhere else too).

I was thinking something the same, but then if it's in an IFRAME you'd have to get a reference to the parent frame to cause the redirect.

How is the page actually constructed? Could you maybe write a seperate control or something that is used in the sidebar, rather than using an existing resource and just putting it in an IFRAME?