Hi guys. I have finished designing a website and everything looks good except for one thing. I have a form and I have positioned the fields using the margin-top css property. It looks great on FF but there's too much space between fields on IE and it looks bad. Here's the URL: http://www.theoutsourcingcompany.com/problem/test.html Try it with FF and then with IE and see for yourself. The CSS is here: http://www.theoutsourcingcompany.com/problem/css/style.css Would someone please help me and let me know what the problem is? For those who want the code, here it is. First the HTML: <!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> <link href="css/style.css" rel="stylesheet" type="text/css"> <title>Hi</title> <style type="text/css"> <!-- .style1 {font-size: 10px} --> </style> <style type="text/css"> <!-- body { background-color: #97c7da; } --> </style> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <body> <div class="divheader"> </div> <div class="divmiddle"> <font class="Title"><font class="GreyBlue"><br /> </font></font> <p align="left" style="word-spacing: 0; margin-top: 0"><br /> </p> <div class="regdiv"> <form id="ebook-form2" name="contact-form" method="post" action="contact.php"> <input name="email" type="text" class="textfieldsa" id="email" size="25" /> <input name="firstname" type="text" class="textfields5" id="firstname" size="25" /> <input name="lastname" type="text" class="textfields5" id="lastname" size="25" /> <input name="middleinitial" type="text" class="textfields5" id="middleinitial" size="25" /> <input name="dob" type="text" class="textfields5" id="dob" size="25" /> <input name="countryofbirth" type="text" class="textfields5" id="countryofbirth" size="25" /> <input name="cityofbirth" type="text" class="textfields5" id="cityofbirth" size="25" /> <input name="countryofcitizenship" type="text" class="textfields5" id="countryofcitizenship" size="25" /> <input name="foreignaddress" type="text" class="textfieldsb" id="foreignaddress" size="25" /> <input name="foreigncity" type="text" class="textfields5" id="foreigncity" size="25" /> <input name="foreignstate" type="text" class="textfields5" id="foreignstate" size="25" /> <input name="foreignzip" type="text" class="textfields5" id="foreignzip" size="25" /> <input name="foreigncountry" type="text" class="textfields5" id="foreigncountry" size="25" /> <input type="image" src="images/contactbutton.jpg" alt="Send Your Message" width="164" height="52" class="textfieldsc" /> </form> </div> <p align="left" style="word-spacing: 0"><br /> </p> <p align="left" class="Text"> </p> </div> <div class="divfooter"> <div align="center"></div> </div> </body> </html> Code (markup): And here's the CSS: .contactdiv { background-image: url(../images/contactform.jpg); background-repeat: no-repeat; height: 500px; width: 500px; margin: auto; } .textfields2 { font-size: 16px; margin-left: 230px; margin-top: 75px; } .textfields3 { font-size: 16px; margin-left: 230px; margin-top: 4px; } .textfields4 { font-size: 16px; margin-left: 30px; margin-top: 12px; } .buttoncontact { font-size: 12px; margin-left: 152px; margin-top: 17px; } .Title { FONT-SIZE: 20pt; FONT-FAMILY: Trebuchet MS, Verdana, Arial; COLOR: #000000; FONT-WEIGHT: bold; LETTER-SPACING: -2px;} .SubTitle { FONT-SIZE: 16pt; FONT-FAMILY: Trebuchet MS, Verdana, Arial; COLOR: #000000; FONT-WEIGHT: bold; LETTER-SPACING: -2px;} .BlueLight { COLOR: #0099FF; font-family: Geneva, Arial, Helvetica, sans-serif; } .Blue { COLOR: #0099FF; } .GreyBlue { COLOR: #0099FF; font-family: Geneva, Arial, Helvetica, sans-serif; } .FormTextBox { BACKGROUND-COLOR: #FFFFFF; FONT-FAMILY: Trebuchet MS, Verdana, Arial; FONT-SIZE: 12px; COLOR: #9AC3D5; FONT-WEIGHT: bold;} A.Menu:link { FONT-SIZE: 12px; FONT-FAMILY: "Trebuchet MS", Verdana, Arial; COLOR: #0000FF; TEXT-DECORATION: underline; } A.Menu:visited { FONT-SIZE: 12px; FONT-FAMILY: "Trebuchet MS", Verdana, Arial; COLOR: #0000FF; TEXT-DECORATION: underline; } A.Menu:hover { FONT-SIZE: 12px; FONT-FAMILY: Trebuchet MS, Verdana, Arial; TEXT-DECORATION: underline; COLOR: #4034B4;} #sddm { margin: 0; padding: 0; z-index: 30} #sddm li { margin: 0; padding: 0; list-style: none; float: left; font: bold 11px Trebuchet MS;} #sddm li a { display: block; margin: 0 0px 0 0; padding: 4px 10px; width: 90px; background: #1A70AB;color: #FFF;text-align: center;text-decoration: none} #sddm li a:hover{background:#9CD0DD;} #sddm div{position: absolute;visibility: hidden;margin: 0;padding: 0;background: #BDD9E1;border: 1px solid #5970B2;} #sddm div a{position: relative; display: block; margin: 0;padding: 5px 10px;width: auto; white-space: nowrap;text-align: left;text-decoration: none;background: #CAE9F2;color: #1F0573;font: 11px Trebuchet MS;} #sddm div a:hover{background: #507F90;color: #FFF;} .centro { text-align: center; } .divheader { background-image: url(../images/newheader.jpg); background-repeat: no-repeat; height: 155px; width: 697px; margin: auto; } .divmiddle { background-image: url(../images/newmiddle.jpg); background-repeat: repeat-y; width: 697px; margin-top: -11px; margin-right: auto; margin-bottom: auto; margin-left: auto; } .divfooter { background-image: url(../images/newfooter.jpg); background-repeat: no-repeat; height: 74px; width: 697px; margin-top: -12px; margin-right: auto; margin-bottom: auto; margin-left: auto; } p { text-align: justify; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: normal; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; } .padding { padding-top: 15px; padding-right: 0px; padding-bottom: 15px; padding-left: 15px; } .paddingleft { padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 0px; } h1 { padding: 20px; text-align: justify; } ::selection { background: #000066; color: white; } ::-moz-selection { background: #000066; color: white; } .textfields5 { font-size: 16px; margin-left: 250px; margin-top: 4px; } .textfields6 { font-size: 16px; margin-left: 230px; margin-top: 4px; } .footertext { font-size: 10px; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; } .posheader { margin-left: 8px; margin-top: -10px; } .photopad { padding-right: 10px; text-align: center; } .floatr { float: right; padding-left: 10px; padding-top: 10px; padding-bottom: 10px; } .regdiv { background-image: url(../images/regform.jpg); background-repeat: no-repeat; height: 636px; width: 500px; margin: auto; } .textfieldsa { font-size: 16px; margin-left: 250px; margin-top: 98px; } .textfieldsb { font-size: 16px; margin-left: 250px; margin-top: 67px; } .textfieldsc { font-size: 16px; margin-left: 170px; margin-top: 18px; } .textfieldsd { font-size: 16px; margin-left: 230px; margin-top: 4px; } .ebookformindex { background-image: url(../images/brochure.jpg); height: 308px; width: 500px; background-repeat: no-repeat; margin: auto; } .textfieldsdname { font-size: 16px; margin-left: 90px; margin-top: 190px; } .textfieldsdemail { font-size: 16px; margin-left: 90px; margin-top: 3px; } .textfieldsdbutton { font-size: 16px; margin-left: 300px; margin-top: -60px; } .tableprices { text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: normal; } h2 { text-align: justify; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: normal; padding-top: 10px; padding-right: 20px; padding-bottom: -30px; padding-left: 20px; font-weight: normal; margin-bottom: -20px; } Code (markup): Thank you so much for your help, this is driving me nuts.
Put the following in the beginning of your stylesheet: It eliminates the extra margins which IE applies to various elements.
It would also help if you validated your code... although I suspect this will force you to start over as far as coding...