Check this out- I was working on a menu for a web site and used a series of ASP:Hyperlink objects to display it.
So here's my menu:
<div id="navigation">
<asp:HyperLink ID="HyperLinkHome" NavigateUrl="~/Default.aspx" runat="server">Home</asp:HyperLink>
<asp:HyperLink ID="HyperLinkNewRequest" NavigateUrl="~/Default.aspx" runat="server">New Request</asp:HyperLink>
<asp:HyperLink ID="HyperLinkMyDepartment" NavigateUrl="~/Default.aspx" runat="server">My Department</asp:HyperLink>
<asp:HyperLink ID="HyperLinkSearch" NavigateUrl="~/Default.aspx" runat="server">Search</asp:HyperLink>
</div>
And here's my CSS:
#navigation
{
border: 1px solid #c35f11;
background-color: #e4a258;
padding: 2px 0 2px 0;
}
#navigation a
{
font: bold 13px/1.0em Verdana;
color: #0e0f09;
padding: 4px 15px 4px 15px;
border-right: 1px solid #c35f11;
text-decoration: none;
}
#navigation a:hover
{
background-color: #c35f11;
}
But by golly, this is what it looks like when I hover over the menu items:
What the heck is that little light orange vertical line (to the left of where I'm hovering) doing messing up my layout???
I thought that I could fix it in the properties of the ASP:Menu object. No dice. Then I went to the properties of the individual menu entry. No soap. Finally, I tried to hack the CSS with a negative absolute position or negative padding or other such smoke and mirrors. No love. Dejected, I gave up and told myself it was a bug in the control. I became so obsessed with that blasted little line that the quality of style in my code went down. I had inline CSS, unnecessary nested divs within other useless nested divs, and worst of all the formatting went away. Instead of the nice, pretty code you saw above, my menu turned into this monstrosity:
<div id="navigation">
<asp:HyperLink ID="HyperLinkHome" NavigateUrl="~/Default.aspx" runat="server">Home</asp:HyperLink><asp:HyperLink
ID="HyperLinkNewRequest" NavigateUrl="~/Default.aspx" runat="server">New Request</asp:HyperLink><asp:HyperLink
ID="HyperLinkSearch" NavigateUrl="~/Default.aspx" runat="server">Search</asp:HyperLink><asp:HyperLink
ID="HyperLinkHelp" NavigateUrl="~/Default.aspx" runat="server">Help</asp:HyperLink>
</div>
With a tear in my eye, I moved on to other tasks in the project and abandoned my plan to destroy that blemish. It had beaten me.
But all was not lost, because when I loaded the page, I saw this:
Free at last, free at last, that blasted bug had worked itself right out of the system. And I had absolutely no idea what fixed it. So I repented of my evil ways and cleaned up my code. And daggummit, the blasted bug came back. Ctrl+z! Save us!
The moral of the story is: messy code works. No, wait, that's not right. The real moral of the story is that... umm... you shouldn't care about formatting? Eh, that doesn't sound right either. OK, forget the moral.
The trick is- if you want your ASP:HyperLink (or ASP:Menu, for that matter) code to look nice and pretty, you might run into an issue with the rendering. The carriage returns in the html get presented as empty space on the browser, which causes the vertical line. Solution: formatting be darned, runitalltogetherinoneuglylineandit'llrenderproperly. Hopefully.