Incompibilities alignment browser

I am trying to Center a form on my page using css text-align: center. This works very well in internet explore. In firefox, however, the form remains on the left.

Here are two photos:

Internet Explorer:

Firefox:

==================================================================================

Here is my html code:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""
"< html xmlns ="http://www.w3.org/1999/xhtml"> <!-InstanceBegin template="/Templates/cliffsteele.dwt ' codeOutsideHTMLIsLocked = 'false'->
< head >
< meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"
<!-InstanceBeginEditable name = "doctitle"-->
Cliff < /title > < title > home page
<! - InstanceEndEditable - >
< style type = "text/css" >
<!--
->
< / style >

<!-[if lte IE 7] >
< style >
. Happy {right margin:-1px ;} / * this negative margin of 1px can be placed on any of the columns in this layout with the same corrective effect.} */
UL. NAV a {zoom: 1 ;}}  / * the property zoom gives IE the hasLayout trigger to fix additional whiltespace between the links * /.
< / style >
<! [endif]-->

< link href = "cliff.css" rel = "stylesheet" type = "text/css" / > "

< script src = "SpryAssets/SpryMenuBar.js" type = "text/javascript" > < / script > "
< link href = "SpryAssets/SpryMenuBarHorizontal.css" rel = "stylesheet" type = "text/css" / > "
<!-InstanceBeginEditable name = "head"->
< style type = "text/css" >
. Container content div div {}
text-align: center;
}
< / style >
<! - InstanceEndEditable - >
< / head >

< body >

< div class = "container" >

< div class = "header" > < img src = "Pictures/logo.gif" alt = "Logo" name = "Insert_logo" width = "81" height = "63" id = "Insert_logo" style ="background: #8090AB; Display: block; "/ >

<! - end .header - > < / div >

< div class = "sidebar1″" > <!-InstanceBeginEditable name = "sidebar"-> < img src = "Pictures/back1.jpg" width = "72" height = "72" / > "
< style p = "do-size: larger;" font family: "Comic Sans MS", cursive "> contact me by mail, telephone or electronic mail < /p >"
< p > < img src = "Pictures/back1.jpg" width = "72" height = "72" / > < / p > "
< p > < img src = "Pictures/back1.jpg" width = "72" height = "72" / > < / p > "
<! - InstanceEndEditable - >
<! - end .sidebar - > < / div >

< div class = "content" >

< div > < ul id = "MenuBar1" class = "MenuBarHorizontal" >
< li > < a href = "cliffsteele.html" > home < /a > < /li >
< li > < a href = "#" class = "MenuBarItemSubmenu" > < /a > Resort
< ul >
< li > < a href = "facilities.html" > our facilities < /a > < /li > ""
< li > < a href = "Kennel.html" > Boarding & amp; "" Daycare < /a > < /li >
< li > < a href = "spa.html" > grooming < /a > < /li > ""
< li > < a href = "#" > rates < /a > < /li >
< /ul >
< /li >
< li > < a class = "MenuBarItemSubmenu" href = "#" > view < /a > handling
< ul >
< li > < a href = "#" > news < /a > < /li >
< li > < a href = "#" > rates < /a > < /li >
< li > < a href = "calendar.html" > annex < /a > < /li >
< /ul >
< /li >
< li > < a href = "#" > photo library < /a > < /li >
< li > < a href = "#" > about me < /a > < /li >
< li > < a href = "#" > please < /a > < /li >
< /ul > < / div >

< br / >
<!-InstanceBeginEditable name = "title"->
< h1 style = "margin: 10px;" Clear: both; text-align: center; font size: xx-large. do-family: Georgia, "Times New Roman", Times, serif; padding-top: 20px; "> Please < / h1 >
<! - InstanceEndEditable - >

< div > <!-name = 'content'-> InstanceBeginEditable

< div style = "text-align: center;" font-size: medium; do-family: Georgia, "Times New Roman", Times, serif; padding-bottom: 20px; ">
1395 RT. 6 < br / >
Carmel, NY 10512-1627 < br / >
United States < br / >
pH: (845) 225-2463 < br / >
Cell: (845) 661-0010 < br / >
< style p = "" margin-bottom: 20px; "> < / p >"
< / div >

< div class = 'form' ' > '.
< name of the form = "contact form" method = "post" action = "send_form_email.php" > "

< table width = "450px" >

< b >

< td valign = "top" >

< label for = "FirstName" > name * < / label >

< table >

< td valign = "top" >

< input type = "text" name = "FirstName" maxlength = "50" size = "30" >

< table >

< /tr >

< b >

< td valign = "top" ">"

< label for = "name" > family name * < / label >

< table >

< td valign = "top" >

< input type = "text" name = "name" maxlength = "50" size = "30" >

< table >

< /tr >

< b >

< td valign = "top" >

< label for 'email' = > E-mail address * < / label >

< table >

< td valign = "top" >

< input type = "text" name = "email" maxlength = "80" size = "30" >

< table >

< /tr >

< b >

< td valign = "top" >

< label for = 'phone' > phone number < / label >

< table >

< td valign = "top" >

< input type = "text" name = "phone" maxlength = "30" size = "30" >

< table >

< /tr >

< b >

< td valign = "top" >

Comments of < label for 'comments' = > * < / label >

< table >

< td valign = "top" >

< name textarea = "comments" maxlength = "1000" cols = "25" lines = "6" > < / textarea >

< table >

< /tr >

< b >

< td colspan = "2" style = "text-align: center" >

"" < input type = "submit" value = "Submit" > < a href = "Email" _mce_href = "http://www.freecontactform.com/email_form.php" > Email "> http://www.freecontactfo rm.com/email_form.php" > Email form < /a >

< table >

< /tr >

< /table >

< / make >

< / div >

<! - InstanceEndEditable - > < / div >
<! - end content - > < / div >

< div class = "footer" >

< div style = "float: right" >
"< p > < a href ="MAILTO:[email protected]"> Site designed by Fredric M. Zipser < /a > < br / >"

< /p >
< / div >

< div class = "clearfloatleft" >
< p > Clifford W. Steele professional manager < br / >
1395 RT. 6 < br / >
Carmel, NY 10512-1627 < br / >
United States < br / >
pH: (845) 225-2463 < br / >
Cell: (845) 661-0010 < br / >
"< a href ="MAILTO:[email protected]">[email protected]< /a > < /p > "
< / div >

<! - end .footer - > < / div >

<! - end .container - > < / div >
< script type = "text/javascript" >
var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});})
< /script >
< / body >
<! - InstanceEnd - >

========================================================================

Here is my externel Css page:

@charset "utf-8";
{body
Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.
background: #4E5869;
margin: 0;
padding: 0;
Color: #000;
}

/ * ~ ~ Tag of the element selectors ~ ~ *.
UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
H1, h2, h3, h4, h5, h6 {p}
margin-top: 0;  / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */
padding-right: 15px;
padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */
do-size: x-small;
color: #FFF;
}
an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}
border: none;
}

/ * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */
a: link {}
color: #414958;
text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.
}
a: visited {}
color: #4E5869;
text-decoration: underline;
}
a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}
text-decoration: none;
color: #0033ff;
font-size: medium;
do-family: "Comic Sans MS", cursive;
}

/ * ~ ~ This container surrounds all the other div tags giving them their percentage width ~ ~ * /.
. Container {}
Width: 80%;
Max-width: 1260px; / * a max-width may be desirable to keep this provision to become too wide on a big screen. This keeps the more readable line length. IE6 does not respect this statement. */
min-width: 780px; / * set to auto on the sides, coupled with the width available to the centres. It is not necessary if you set the width of the .container to 100%. */
height: 80%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
left margin: auto;
background-color: #93A5C4;
}
. Container .footer #fMisc div p {}
do-family: Verdana, Geneva, without serif.
do-size: x-small;
color: #FFF;
}

/ * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.
. Header {}
background: #6F7D94;
}

/ * ~ ~ These are the columns for page layout. ~~

(1) padding is only placed on the top and/or bottom of the divs. The elements contained in these divs have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.

(2) no margin was given to the columns, because they all floated. If you need to add the margin, avoid placing on the side you're floating into (for example: a right margin on a div set to float to the right). Many times, padding can be used instead. For divs where this rule needs to be broken, you must add a statement of ' display: inline ' to the rule of the div to tame a bug where some versions of Internet Explorer double the margin.

(3) given that the classes can be used several times in a document (and an element can also have several classes applied), the columns have received the names of classes instead of IDs. For example, two sidebar div could be stacked if necessary. These can easily be changed to the ID if that's your preference, as long as you don't use them once per document.

(4) If you prefer your nav on the left instead of the right, just float those columns the opposite direction (to the left instead of all rights), and they will return in reverse order. There is no need to move the div in the HTML source code.

*/
{.sidebar1}
float: right;
Width: 20%;
padding-bottom: 64px;
height: 100%;
do-family: "Comic Sans MS", cursive;
make-weight: bolder;
font-size: medium;
border-top-width: 0%;
border-right-width: 0%;
border-bottom-width: 0%;
border-left-width: 0%;
background-color: #93A5C4;
background-repeat: repeat;
margin: 0px;
overflow: hidden;
}
. Happy {}
Width: 80%;
float: right;
background-image: url (back1.gif);
background-repeat: repeat;
background-color: #93A5C4;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 70px;
padding-left: 0px;
height: 100%;
overflow: hidden;
}

/ * ~ ~ This group selector gives the lists in the domain content space ~ ~ * /.
. Content ul, ol {} content
padding: 0 15px 15px 40px; / * This padding reflects the right padding in the titles and the paragraph above net. Padding was placed on the bottom for the space between the other elements in the lists and on the left to create the withdrawal. These can be adjusted as desired. */
}
. Container content #MenuBar1 {}
background-image: url (back1.gif);
background-repeat: repeat;
margin left: 6%;
}

/ * ~ ~ The list of navigation styles (can be removed if you choose to use a contextual menu premade as Spry) ~ ~ * /.
UL. NAV {}
list-style: none; / * This command deletes the list marker * /.
border-top: 1px solid #666; / * This creates the top border for the links - all the others are placed using a bottom border on the LI * /.
margin-bottom: 15px; / * This creates space between the following content browsing * /.
}
{ul li. NAV
border-bottom: 1px solid #666; / * This creates separation button * /.
}
UL. NAV, the ul.nav: visited {/ * these selectors of grouping allows you to ensure that your links to retain their look button even after the ongoing visit * /}
padding: 5px 5px 5px 15px;
display: block; / * Gives the link properties block causing it to fill the whole container LI. This causes the entire area responds to a mouse click. */
text-decoration: none;
background: #8090AB;
Color: #000;
}
UL. NAV a: hover, ul.nav one: ul.nav active,: focus {/ * this changes the background and color of text for browsers of the mouse and the keyboard * /}
background: #6F7D94;
color: #FFF;
}

/ * ~ ~ Footer ~ ~ * /.
.footer {}
background: #6F7D94;
position: relative; / * This gives hasLayout IE6 to well clear * /.
Clear: both; / * This clear property forces the .container to understand where the columns end up and contain them * /.
font size: xx-small;
Color: #000;
margin: 0px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}

/ * ~ ~ various float/clear classes ~ ~ * /.
.fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */
float: right;
left margin: 8px;
}
.fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */
float: left;
right margin: 8px;
}
{.faclines}
do-family: Georgia, "Times New Roman", Times, serif;
font size: large;
}

.clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}
Clear: both;
height: 0;
font size: 1px;
line-height: 0px;
}
a {}
color: #FFF;
}
. Container .footer #fMisc div p {}
color: #FFF;
}
. Container .footer div p {}
do-family: Verdana, Geneva, without serif.
do-size: x-small;
color: #FFF;
Clear: left;
}
. Container .footer div p {}
color: #FFF;
}
{p}
font size: xx-large.
}
{p}
Color: #000;
font-size: XL;
do-family: Georgia, "Times New Roman", Times, serif;
}
. .Footer #fMisc {} div container
do-size: x-small;
}
. .Footer #fMisc {} div container
color: #FFF;
}
. Container content h1 {}
do-family: Verdana, Geneva, without serif.
font-size: XL;
make-weight: bold;
Color: #000;
}
{.clearfloatleft}
Clear: left;
}
.container {} a .sidebar1 p
font-size: medium;
Color: #00F;
}
p.Heading a: hover, p.heading a: active, p.heading a: focus {/ * this changes the color background and text for browsers of keyboard and mouse * /}
font-size: XL;
do-family: Verdana, Geneva, without serif.
Color: #00F;
}
{p.Heading}
font-size: XL;
do-family: Verdana, Geneva, without serif.
Color: #000;
}
. Container content div div {}
text-align: center;
}
. Container content div div {}
text-align: center;
font size: small;
}
{div. Form}
text-align: center;
font size: small;

border: 0;
white-space: nowrap;
}