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!