Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why is this not working?

    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.../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:

    Code:
    <!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">&nbsp;</p>
    </div>
    
    <div class="divfooter">
      <div align="center"></div>
    </div>
    </body>
    
    </html>


    And here's the CSS:

    Code:
    .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;
    }

    Thank you so much for your help, this is driving me nuts.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    The margin seems the same to me…IE 7 has a greater line-height in the input fields (or height) which is making them align improperly, though.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •