Why Won't My ASP.NET Hyperlink Work in IE?

Question

I'm making a very simple ad button system using ASP.NET 2.0

The advertisment is a 150x150px square that is displayed on **.
(Scroll down a little and you'll see the bright green "Angry Octopus" on the right side of the screen.)

Now, I am not the administrator of *. Instead, I am the administrator of angryoctopus.net
Therefore, I don't have the ability to change the ad display code on a whim. So I gave * this snippet of code to display our ad nicely, while still allowing me to customize the back-end code on my side of things:

<iframe src="http://www.angryoctopus.net/Content/Ad/150x150.aspx"
frameborder="0" width="150" height="150" scrolling="no"
style="padding: 0; margin: 0;"></iframe>

You'll find this snippet in the page source to **

On my side, the code looks like this:

<%--150x150.aspx--%>
<asp:HyperLink runat="server" NavigateUrl="http://www.angryoctopus.net/" Target="_top">
    <asp:Panel ID="pnlMain" runat="server" BackColor="#D1E231"
        style="padding: 0; margin: 0" Width="150" Height="150">
        <asp:Image runat="server" ImageUrl="http://www.angryoctopus.net/Content/Ad/150x150.png"
            BorderStyle="None" style="padding: 0; margin: 0" />
    </asp:Panel>
</asp:HyperLink>

... and there's some insignificant back-end C# code for hit-counting.

This looks all well and good from the code standpoint, as far as I can tell. Everything works in Firefox and Chrome. Also, everything appears to work in IE8 in all of my tests. I haven't tested IE7.

But when you view ** in IE(8) the hyperlink doesn't do anything, and the cursor doesn't indicate that the hyperlink is even there. Although you can see the target URL in the status bar.

I've considered the fact that ** uses XHTML 1.0 Strict could be causing problems, but that would probably affect Firefox and Chrome right? (My aspx pages use XHTML 1.0 Transitional)

My only other theory is that some random CSS class could be applying a weird attribute to my iframe, but again I would expect that to affect Firefox and Chrome.

Is this a security issue with IE? Does anyone know what part of *'s website could be blocking the hyperlink in IE? And how can I get around this without having to hard code anything on *'s website? Is there an alternative to iframe that would do the same job without requiring complicated scripting?

Answer 1

The first thing to do would be to ensure your page is valid XHTML. Current there are 1029 validation errors. If your mark-up isn't valid, then you can't expect browsers to consistently interpret and render your content.

One major thing to look at is the fact your site declares a doctype of XHTML 1.0 Strict and Iframes are not valid in this doctype. You probably want to use XHTML Transitional, which allows it.

Also, your own HTML with your add in is also broken. You have a closing DIV in the wrong place. Your mark-up looks like this:

  <a href="http://www.angryoctopus.net/" target="_top">
  <div id="ctl00_cntBody_pnlMain" style="background-color:#D1E231;height:150px;width:150px;padding: 0; margin: 0">

   <img src="http://www.angryoctopus.net/Content/Ad/150x150.png" style="border-style:None;border-width:0px;padding: 0; margin: 0" />

</div></a>

You should move the closing DIV outside the closing A tag.

As I said, ensure you validate your HTML since these errors will be highlighted. Valid mark-up is not just a nicety, it is essential to ensuring your content renders correctly across multiple browsers.