Why does placing this html within form tags change the layout?

I'm using this free Web Template - EliteCircle and have just incorporated it into a master page. The master page wraps the html in:

<form id="form1" runat="server">
 //master page html
</form>

The template almost comes out fine except the entire page is surro开发者_运维技巧unded by a think white border (default CSS behavior for form?) and the footer background is half white on the very bottom.

I wouldn't expect the form with id=form1 to change anything in the layout. There is nothing in the [CSS][2] with that id.

When I remove the form tags from the master page (just to check) the layout is perfect, no problems.

Any ideas?

(Using Visual Web Developer 2008 Express)

Thanks, Greg

The CSS: http://www.styleshout.com/templates/preview/EliteCircle12/images/EliteCircle.css

Have you seen the

/* form elements */
form {
    margin: 15px;
    padding: 15px 5px;
    border: 1px solid #EFEFEF; 
    background: #F8F8F8;    
}

declaration in your CSS file? That might just explain the thick white border and other stuff you mention :)

Either change that declaration to form.myForm (and change all forms that need it), or re-cascade the form1 id or interior tags on your page to override those settings.

I agree with Konerak, but a word of advice, don't set properties to html elements in a generic way, instead, use classes...

Your css:

/* form elements */
form {
    margin: 15px;
    padding: 15px 5px;
    border: 1px solid #EFEFEF; 
    background: #F8F8F8;    
}

The sugestted:

form.standard {
    margin: 15px;
    padding: 15px 5px;
    border: 1px solid #EFEFEF; 
    background: #F8F8F8;    
}

If you set the css to the form element, all forms in your page will receive does properties, but if you set does properties to a class, only form's with that class will receive then... Btw: DocType may also interfere with the desired result...