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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can I make a good-looking form?

    Hi, today a friend of mine introduced me to browsershots.org. When I saw what my contact forms looked like in different browsers I couldn't believe it.

    To make forms look nice I usually create a div and assign it a background image using the background-image css property. I give the div the same height and width as the background image, and then I position the input fields using the margin-top and margin-left properties.

    In Safari the text fields are way too long and get out of the image. In IE the vertical separation is too little and everything is screwed up. In Opera the text fields are too tall and screws up the form as well.

    Many people recommended to me not to use divs with a background for forms. My question then is: how should I do it? Can I use a table with a background image? I don't want to have a normal (ugly) contact form. Is there any way of making a form work across the browsers without giving up the nice design?

    BTW, my website is www.tryarg.com/WorldCup if you want to take a look at the form at the bottom to see what I am talking about.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    There may be some difference in the appearance of various input control over browsers, though we can layout the form very well.

    I haven't viewed your site, as I see a lot of markup errors in your document, see http://validator.w3.org/check?uri=ht...Inline&group=0

    Fix them first.
    Last edited by abduraooft; 07-21-2008 at 10:33 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Even if you didn't use a background image, the input sizes would be different across browsers. So the background image is a moot issue, and if you're marking up your form "properly" (i.e., using fieldset, label, and input together) then accessibility isn't an issue, so might as well make it pretty.

    To get things looking right, start by sizing everything in the form — width, height, line-height, font-size, etc. — as consistently as you can. At the moment I don't see any dimension (width or height) assigned to your input fields, which of course is going to make things look differently everywhere as each browser will apply its own default size.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,927
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts

  • #6
    Regular Coder
    Join Date
    Jul 2006
    Posts
    399
    Thanks
    33
    Thanked 7 Times in 7 Posts
    i was about to paste that link


  •  

    Posting Permissions

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