Form element messes up imported HTML/CSS layout template in ASP.NET

Question

I want to use this pure HTML/CSS template for my ASP.NET website:

http://sub3.tanguay.de

I copy it inside my Default.aspx page, inside the FORM element, but the form messes up the layout:

http://sub2.tanguay.de
UPDATE: this now displays correctly, thanks to Devio.

I tried altering the style of the form tag but can't get it to stop affecting the layout, I tried:

style="margin: 0px; padding: 0px; display: inline; background-color: transparent;"

• Is this a common issue when copying in layout templates into ASP.NET?
• Is there an easy work around, like some margin:-2px fix or something like that?
• I need to keep the form tag, of course, for the ASP.NET functionality.

Answer 1

1) try removing the background-color attribute from the form class:

form {
    margin:10px; padding: 0;
    border: 1px solid #f2f2f2; 
    background-color: #FAFAFA; /* remove this */
}

2) you cannot nest forms, but the searchform is contained inside the ASP.Net form, and ASP.Net requires exactly one form tag per page.

Answer 2

I had the same issue and changing the form element to the following fixed things:

<form id="form1" runat="server" style="display: inline; background-color: transparent;">