ASP.NET Link Button generating wrong mark up

Question

Hi, I'm having some trouble with a Link Button generating incorrect mark up.

It should generate something like this:

<div style="margin-top: 5px; width: 150px; margin-left: auto; margin-right: auto;">
 <a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
 class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
  <div>
   <span class="border top">
    <span class="border">
    </span>
   </span>
   <span class="icon cancel">
    Cancel
   </span>
   <span class="border bottom">
    <span class="border">
    </span>
   </span>
  </div>
 </a>
</div>

Notice only one tag.

It ends up generating sometimes this:

<div style="margin-top: 5px; width: 150px; margin-left: auto; margin-right: auto;">
 <a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
 class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
 </a>
 <div>
  <a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
  class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
   <span class="border top">
    <span class="border">
    </span>
   </span>
   <span class="icon cancel">
    Cancel
   </span>
   <span class="border bottom">
    <span class="border">
    </span>
   </span>
  </a>
 </div>
 <a onclick="return JSConfirm('Confirm?');" id="ctl00_cntPrincipal_btnCancel"
 class="round-corner opt-upload cancel" href="javascript:__doPostBack('ctl00$cntPrincipal$btnCancel','')">
 </a>
</div>

Notice now 3 (!) anchor tags.

It only happens on a specific server to a specific browser, server is running ASP.NET 2.0 on IIS 6 using Firefox 3.5 to access the page.

Update: I view the code using FF view source, no plugins installed, the document is supposedly XHTML 1.1 Transitional, but I don't think it validates since you can't have div tag inside anchor tags.

Answer 1

How are you seeing that markup? In Firebug? In the FF source viewer with TidyHTML installed?

What (X)HTML declaration are using using? HTML 4.1? XHTML Transitional? Strict?

The reason I ask, is that the <a> tag is defined as an inline element, so it is not legal to wrap it around a block element, such as a <div> tag.

The source you are seeing in FF has probably been corrected to handle this, by adding the additional anchor tags inside and at the end of the div tag.

How are you seeing that markup? In Firebug? In the FF source viewer with TidyHTML installed?

What (X)HTML declaration are using using? HTML 4.1? XHTML Transitional? Strict?

The reason I ask, is that the <a> tag is defined as an inline element, so it is not legal to wrap it around a block element, such as a <div> tag.

The source you are seeing in FF has probably been corrected to handle this, by adding the additional anchor tags inside and at the end of the div tag.

---

Nope, the View Source is as FF fixes it up - if you want to check this, you can install the ViewSourceWith plugin, and view the source in your NotePad of choice - I've noticed differences between these two.

Unlike ASP.NET 1.1, the BrowserCaps in ASP.NET 2.0 do recognise FF, Safari, etc, so the general output shouldn't be that different to what you see in IE.