#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    2
    Rep Power
    0

    Exclamation Help needed with form. CSS issue, fine in firefox but not safari and google chrome


    Hi Guys

    I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

    I am using the latest mac OS and latest versions of all browsers.

    The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

    Here is the code for the form...

    <form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


    <ul>
    <li>
    <label for="name">Name:</label>
    <input name="name" id="name" type="text" class="required" />
    </li>




    <li>
    <label for="email">E-mail:</label>
    <input name="email" id="email" type="text" class="required email" />
    </il>


    <li>
    <label for="subject">Subject:</label>
    <input name="subject" id="subject" type="text" class="required" />
    </li>

    <li>
    <label for="detail">Message:</label>
    <textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
    </li>


    <li>
    <input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
    </li></ul>

    </form>

    Here is the css for that page...

    #content_about {
    color: #666666;
    }



    /***************************************************
    CONTACT
    ***************************************************/
    #form {
    margin: 0px;
    position: relative;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    float: left;
    }
    #form div {
    width: 510px;
    position: relative;
    float: left;
    padding-bottom: 9px;
    }
    #form div label {
    width: 400px;
    }
    #form div label.error {
    color: #a80000;
    position: absolute;
    top: 0px;
    right: 0px;
    text-align: right;
    font-size: 11px;
    }
    #form div.message_sent {
    background-color: #31B8DA;
    width: 890px;
    float: left;
    padding: 10px;
    margin-bottom: 15px;
    color: #FFFFFF;
    }
    #form input {
    width: 499px;
    padding: 8px;
    font-size: 13px;
    color: #999999;
    background-color: #FFFFFF;
    float: right;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #C3C3C3;
    border-right-color: #E8E8E8;
    border-bottom-color: #E8E8E8;
    border-left-color: #C3C3C3;
    }
    #form input:focus, #form textarea:focus {
    background-color: #F4F4F4;
    }
    #form textarea {
    width: 500px;
    padding: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #FFFFFF;
    color: #aaaaaa;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #C3C3C3;
    border-right-color: #E8E8E8;
    border-bottom-color: #E8E8E8;
    border-left-color: #C3C3C3;
    float: right;
    margin: 0px;
    }
    #form .submitBtn {
    background-color: #31b8da;
    width: 95px;
    color: #FFFFFF;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    padding: 0px;
    font-size: 16px;
    height: 35px;
    display: block;
    margin-top: 20px;
    }
    #form .submitBtn:hover {
    background-color: #1F93B4;
    color: #FFFFFF;
    }
    #form .submitBtn:focus {
    background-color: #4FC1E1;
    }

    #form strong {
    font-size: 24px;
    color: #FFFFFF;
    font-weight: normal;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #6a6a6a;
    display: block;
    }
    #form .font-11 {
    font-size: 11px;
    color: #CCCCCC;
    display: inline;
    }
    #content_about #form li label {
    margin-top: 0px;
    margin-right: 35px;
    margin-bottom: 0px;
    margin-left: 0px;
    line-height: 30px;
    }
    #content_about #form li {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 0px;
    }



    Any help would be greatly appreciated.

    Regards

    Jay
  2. #2
  3. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    Hi, croydon86

    Without looking deeply at your code, the best suggestion is to use a CSS reset in all your projects. It minimizes browser differences. Plopping it in the middle of project may cause some of your elements to seem out of whack, but is not the case when you start with one. Try using that.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Posts
    2
    Rep Power
    0
    Hi mate, thanks for that. You are right i have heard a lot about that and will definitely use that for the next project. However, I have figured out the solution for this current situation.

    For this rule..

    #form {
    margin: 0px;
    position: relative;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 15px;
    float: left;

    I took out the float: left and all seems to be working fine now.

    Thanks again for your input.

IMN logo majestic logo threadwatch logo seochat tools logo