Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Apr 2008
    Posts
    12
    Member #
    16667
    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.  

  3. #2
    Member
    Join Date
    Jul 2008
    Posts
    32
    Member #
    17036
    This looks ok in ie7
    just add it above the </head> tag on that page.
    tested in firefox and ie7 but nothing else and it looks ok

    Code:
    <!--[if IE]>
    <style type="text/css">
    .textfieldsa {
        font-size: 15px;
        margin-left: 250px;
        margin-top: 98px;
    }
    .textfieldsb {
        font-size: 15px;
        margin-left: 250px;
        margin-top: 67px;
    }
    .textfields5 {
     font-size: 15px;
        margin-left: 250px;
        margin-top: 6px;
    }
    </style>
    <![endif]-->


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:08 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com