Grow your CSS skills. Land your dream job.

How can I make a form the same in IE as FF?

  • # December 17, 2009 at 2:16 am

    I have a contact page that uses a form for email and it is PERFECT (well, I still need to add some padding around "Message") in Firefox 3.5.5 but in Internet Explorer 8 it is not following the CSS I setup. So I’m hoping someone can help me make it IE compatible.
    The CSS:

    Code:
    #contact-inputnames {
    left: 10px;
    width:140px;
    height:40px;
    color:#031053;
    background-color:#8A87E0;
    margin-bottom: 10px;
    }
    #contact-inputmessage {
    margin-top:80px;
    left:10px;
    height:110px;
    width:300px;
    color:#031053;
    }
    form {
    margin-top: 0px;
    background-color:#8A87E0;
    padding: 4px;
    color:#031053;
    }
    input {
    border: 1px solid #666699;
    background-color:#8A87E0;
    padding: 2px;
    color:#031053;
    }

    And the HTML:

    Code:
    **all but phone required




    Message:

    Test location: http://pjhalligancpa.com/test/contact.html
    And how it looks in IE and FF:
    [img]http://pjhalligancpa.com/form-ie.jpg[/img]
    How it looks in IE :(
    [img]http://pjhalligancpa.com/form-ff.jpg[/img]
    How it looks in FF :D

    Can anyone help with this? :?:

    Thanks in advance! :)

    # December 17, 2009 at 12:46 pm

    I would start by adding "margin: 0;" to your input’s css, or maybe even using:

    Code:
    * {
    margin: 0;
    padding: 0;
    }

    as a reset at the top of your stylesheet.

    # December 17, 2009 at 9:25 pm

    Thanks, but I do:

    Code:
    body, address, blockquote, dl, ol, ul, li, form, input
    fieldset, h1, h2, h3, h4, h5, h6, p, pre {
    margin:0;
    padding:0;
    }

    I added input too but not sure if it’s valid.

    # December 18, 2009 at 11:39 am

    Ah, okay. Did not realize. Try taking out the <br> between the inputs. They should display as block elements by default, so they shouldn’t be necessary and may be causing the extra space in IE.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".