Rendered HTML differs from source - asp.net-mvc

Question

I've come across some strange behaviour when I want to view a page in my ASP.NET MVC app.
I've created a small HTML helper that should generate a specific layout to display one of my classes.
It is invoked as such:
<div id="tabs-3" style="display:block; float:left;width:95%;">
#foreach (Trade trade in ViewBag.Trades)
{
#Html.Trade(trade, userLanguage)
}
</div>
The expected HTML that is generated looks like this:
<div id="tabs-3" style="display:block; float:left;width:95%;">
<div style="display:block; margin-top:0px; margin-left:auto; margin-right:auto; text-align:center;">
<a href="/en/Trade/Details/1" class="blocklink">
<div style="display:inline-block; margin-top:0px; margin-left:auto; margin-right:auto; border:2px solid black;">
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style='height:50px; width:50px; vertical-align:middle;' alt="User" src="http://localhost:50254/Images/Avatars/01.png">
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold;">
User
</span>
<span style="font-size:8pt; display:block;">
<br/>0 Trades (100%)
</span>
</div>
</div>
<div style="display:inline-block; padding-left:50px; padding-right:50px; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">Sat 19 Apr 2014 20:00</span>
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; ">
<img alt="" src="/Images/Blank.png" style="background: url(/Images/Icons.png) -465px 0; display: block; width: 20px;height: 20px; text-indent: -9999px; margin-left:auto; margin-right:auto;" />
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">3 Trades</span>
</div>
</div>
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold; text-align:right;">
User2
</span>
<span style="font-size:8pt; display:block; text-align:right;">
<br/>0 Trades (100%)
</span>
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style='height:50px; width:50px; vertical-align:middle;' alt="User2" src="http://localhost:50254/Images/Avatars/09.png">
</div>
</div>
</div>
</a>
</div>
<!-- Other records-->
</div>
I've used breakpoints to look at the generated string and it does look like it should. When I look at the source in a browser it also looks like the above.
However the rendered HTML differs from it (I've checked it with the debugging tools of IE 11, FF 28 and Chrome 34), it looks like this:
<div id="tabs-3" style="display:block; float:left;width:95%;">
<div style="display:block; margin-top:0px; margin-left:auto; margin-right:auto; text-align:center;">
<div style="display:inline-block; margin-top:0px; margin-left:auto; margin-right:auto; border:2px solid black;">
<div style="display:inline-block; vertical-align:middle;">
<a href="/en/Trade/Details/1" class="blocklink">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style="height:50px; width:50px; vertical-align:middle;" alt="User" src="http://localhost:50254/Images/Avatars/01.png">
</div>
</a>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<a href="/en/Trade/Details/1" class="blocklink">
<span style="font-size:16pt; display:block; font-weight:bold;"></span>
</a>
User
<span style="font-size:8pt; display:block;">
<br>0 Trades (100%)
</span>
</div>
</div>
<div style="display:inline-block; padding-left:50px; padding-right:50px; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">Sat 19 Apr 2014 20:00</span>
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto; padding-top:5px; padding-bottom:5px; ">
<img alt="" src="/Images/Blank.png" style="background: url(/Images/Icons.png) -465px 0; display: block; width: 20px;height: 20px; text-indent: -9999px; margin-left:auto; margin-right:auto;">
</div>
<div style="display:block; vertical-align:middle; position:relative; margin-left:auto; margin-right:auto;">
<span style="font-size:10pt; display:block; font-weight:bold; text-align:center;">3 Trades</span>
</div>
</div>
<div style="display:inline-block; vertical-align:middle;">
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<span style="font-size:16pt; display:block; font-weight:bold; text-align:right;">
User2
</span>
<span style="font-size:8pt; display:block; text-align:right;">
<br>0 Trades (100%)
</span>
</div>
<div style="display:inline-block; vertical-align:middle; position:relative; ">
<img style="height:50px; width:50px; vertical-align:middle;" alt="User2" src="http://localhost:50254/Images/Avatars/09.png">
</div>
</div>
</div>
</div>
<!--Other records-->
</div>
In case it isn't clear at first sight the Hyperlink (with class="blocklink" on the 3rd row of the good HTML) is not rendered as a single tag around the div, but is rendered several times within the code either with nothing in between or around a <span> tag, breaking what should be in that tag.
The blocklink style class is something I found looking for a way to add a link around a div:
.blockLink
{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
z-index: 1;
background-color:#ffffff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}
Has anyone come across such an issue? I'm really in the dark on why the rendered HTML looks different.
All is done on the build-in IIS Express directly from within VS 2012.4. I can't try it on an external server, since the app is still being developed and no server has been assigned yet.

Answer 1

That's because your html contains nested <a> elements, which is not standards compliant HTML. From the W3C spec for <a>:
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
You also have related discussions on SO, like in this question. The way the browsers render this scenario is discussed here which explains why you see a different rendered html.
I have created this fiddle with a simplified html code that reproduces this issue:
<a class="blockLink" href="#">
<div class="blockLinkContent">
<h1>Link with inner link</h1>
<a class="innerLink" href="#">inner link</a>
</div>
</a>
The rendered html looks like this on Chrome:
<a class="blockLink" href="#">
</a>
<div class="blockLinkContent"><a class="blockLink" href="#">
<h1>Link with inner link</h1>
</a><a class="innerLink" href="#">inner link</a>
</div>
In order to fix this, you can get rid of one of the links. Then use Javascript\CSS to handle the click event and add any styling you might need like active/hover states or text underline.
For example, you could get rid of the inner link, replacing it with a span and use Javascript to handle clicking on the new inner span:
<a class="blockLink" href="#">
<div class="blockLinkContent">
<h1>Outer link only</h1>
<span class="innerLink">inner link</span>
</div>
</a>
$(function(){
$(".innerLink").click(function(){ alert("inner clicked"); return false; });
});
You can play around with this code in this other fiddler.
Hope this helps!