How to keep form size consistent on differen't browsers?

  • Profile Image
    optizign13
    Asked on January 21, 2014 at 01:39 PM

    Hello. Is there a way to keep the input/textarea sizes consistent on all computer browsers?

    I am using this website as an example: http://kingfamilydental.com/. I am using a Mac. Chrome and Safari looks fine. Internet Explorer 10 and Firefox has different issues. I am sending screen shots.

    Right now, I have injected this CSS in form: 

    input, textarea {max-width: 180px}

    @media only screenand (min-device-width : 320px)and (max-device-width : 480px) {.form-textbox, .form-textarea {width: 250px;

    }

    }

    @media only screenand (min-device-width : 768px)and (max-device-width : 1024px) {.form-textbox, .form-textarea {width: 250px;

    }

    }

  • Profile Image
    KadeJM
    Answered on January 21, 2014 at 02:37 PM

    This is a touchy subject because of the various browsers and kits used to run within their different engines so one website page may display nice whereas in another browser it is slightly off even though it should be the same. The easiest way to change this is by using the @Media directive. It would likely take further tweaking to get it just right.

    You could try using a Normalizing CSS File that is designed to make it the same but depending on your form it may not always work. It may take some time but we'll try to figure this out to make it more generalized across major browsers though I think the Normalizing File already does this for the most part as far as I know.

  • Profile Image
    optizign13
    Answered on January 22, 2014 at 12:20 PM

    Hello. What is the @Media directive and what does it do? Also, what is a normalizing css file? Because I already have a CSS file for my website. 

  • Profile Image
    Welvin
    Answered on January 22, 2014 at 01:06 PM

    I've modified your custom CSS codes into this:

    input[type="text"], textarea {

    width: 180px;

    }


    Kindly check if that fixes the issue. So far, it's now good to my end.

    @media: Usually applies to the device screen size.

    Normalize CSS: Same as the example above, we uses input type rather than the ID or Class of each form field.

    Thanks

  • Profile Image
    optizign13
    Answered on January 24, 2014 at 03:38 PM

    Thank you, it works.