ASP.net Weird Bug

The Problem

Could someone explain the following to me.  I have a page with a couple of buttons on it.  They sit nicely next to each other with a  nice gap.  Here’s the Html (webforms):

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:Button ID="btnOne" runat="server" Text="Button One" />
<asp:Button ID="btnTwo" runat="server" Text="Button Two" />
<asp:Button ID="btnThree" runat="server" Text="Button Three" />
<asp:Button ID="btnFour" runat="server" Text="Button Four" />

</div>
</form>
</body>
</html>

As you can see four buttons, all laid out nicely but not doing anything.  And you should have something that looks like this:

Which is expected.  Checking the html generated for any styles, and FireBug says there is none.  So I suspect this is just the default rendering of the buttons.  Fine I can handle that.  It also appears to be similar rendering in other browsers.  Great, consistent behaviour is awesome.

Now the kicker!

In the Html above, add a placeholder around the buttons:

<asp:PlaceHolder ID="phOne" runat="server">
<asp:Button ID="btnOne" runat="server" Text="Button One" />
<asp:Button ID="btnTwo" runat="server" Text="Button Two" />
<asp:Button ID="btnThree" runat="server" Text="Button Three" />
<asp:Button ID="btnFour" runat="server" Text="Button Four" />
</asp:PlaceHolder>

and now you should see the buttons move closer to each other.  WHY!!!

Checking the Html rendered, there are no extra tags, no new css, nothing, nada!  What the fuck Microsoft?  This is random annoying behaviour that makes me want to shove programming up it’s ass some days, and buy an ice cream van (my boss said that once, and it’s a good idea).

But I thought I’d best check it with standard <input type=”button” /> and guess what…works as expected.  The spacing stays the same!!!  So why do asp:buttons change their rendering behaviour?

The Solution

Well to get the buttons to space out again, I had to add float: left; margin-right: 4px; on my .button css class – the float: left; to make all the buttons sit next to each other without spacing to the right as I had other buttons that wouldn’t be wrapped in a asp:placeholder.  What a pain in the ass!  Thanks Microsoft!

10 thoughts on “ASP.net Weird Bug”

  1. There is actually a difference in the rendered HTML, or at least the white-space. The line break after each button which exists in the first version is what leads to the spacing. Remove the line break and you see the same spacing as the buttons in the place holder.

    It’s a common misconception that white-space makes no difference in HTML, but there are occasional when line breaks and spaces can change make noticeable differences in the layout.

    The ASP Placeholder removes the white space which shouldn’t be necessary, which is what is leading to the difference.

    Looks like Microsoft say this is intentional

  2. AHHHHH!!!! Now that’s really even more annoying. And their reasoning is bollox!

    “Thank you for the report, this is actually intentional. Placeholder is not normally user in markup like this, it is essentially a ‘marker’ within a page… “

    PS I never even noticed the difference between the whitespace being there and not being there, as FireBug lays out your Html nicely for you if it can.

  3. Wierd problem Colin, nicely answered Neil. That’s one subtle behaviour. We all know that there is no concept of characters in the control heirarchy, every control when compiled gets its literal text converted into a literal control, so the behaviour must stem from this.

  4. Ah see that starts to make a bit of sense, William, however, I would say that a webform itself is a collection of controls. And most of the time you will have a <form runat=”server” /> in there with a bunch of controls. Why does it preserve whitespace inside the form server control, but not the placeholder?

    Change the placeholder into a asp:panel, and again the whitespace is preserved…ARGH!!!

    Now add <p>Some text</p> with whitespace above and below. Why does it preserve that whitespace…ARGH!!!

    So it’s only the placeholder control that doesn’t preserver white space around input controls…any other control or markup it preserves the whitespace…ARGH!!!!

  5. I think it’s more to do with whether the control is run at the server or not, rather than it being an input control. If you change the paragraph to Some text the white space round it is no longer preserved.

  6. Sorry .. that should have read:

    Some Text

    Or of the above doesn’t work … add the runat=”server” to the p element

    p.s. you need a Preview button

  7. I really should have had a bunch of preview buttons 😀

    Yeah that’s a fair point Neil, that shows that within the placeholder, it’s predictable behaviour – anything with runat inside a placheholder will have the whitespacing around it removed.

    However it’s a bit annoying that only the asp:placeholder that does this. the asp:panel doesn’t do that. It should be the same for all controls.

    If you are building a large web app with different developers working on it, then you could get inconsistencies in style due to something like this, unless you updated your CSS to make it work in all possibilites – with and without whitespace.

    I know some developers that don’t like using float: left to often in their css, as it causes it’s own set of problems!

    Cheers for the info lads 🙂 Still annoying though 😛

  8. I solved the problem by adding <%=Environment.NewLine%> where the whitespace should go. Then the output behaves as I expected. You could probably also add a whitespace char and it would do the same trick. Cheers

  9. Cheers tomb, but that’s more work than I would like. I would have to remember to add < %=Environment.NewLine%> each time, or the  , and my memory is already fading away…stoopid booze!

  10. Thank you!
    I went with tomb’s solution and added . It is a really stupid bug however, pity Microsoft won’t seem to fix it :(.

Leave a Reply

Your email address will not be published.