www.webdeveloper.com
Results 1 to 3 of 3

Thread: pixel perfect cross browser form input elements?

  1. #1
    Join Date
    Jun 2004
    Location
    Southern California
    Posts
    189

    pixel perfect cross browser form input elements?

    I'm using <input> <select> and <textarea> on a form.

    Using CSS I specified the width of each of those elements.

    I want them to appear exactly the same width in all browsers.

    Right now, I think it's impossible.

    Should I just model it for IE, since that's what 95% of the people are using anyways?

    In IE 6, if I use this...

    Code:
    input, textarea{width:16em;}
    select{width:16.4em;}
    ...everything is the same width. In firefox, the select and textareas are different widths (off by a few px).
    Last edited by heavenly_blue; 02-01-2005 at 04:12 PM.

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,408
    Don't know if it will ever be perfect since the graphic element rendering is not specific to the HTML standard and is instead browser-specific. You might try adding explicit margin and padding definitions to each element's style as well (and perhaps border-thickness as well where applicable) to ensure each browser is using the same value.
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    Jun 2004
    Location
    Southern California
    Posts
    189
    Thanks, that helped a bit.

    Using...

    Code:
    input, textarea{margin:0 0 0 1em; padding:0; width:16em;}
    select{margin:0 0 0 1em; padding:0; width:16.3em;}
    ...makes it so pretty much everything lines up in FireFox and IE 6.

    The only thing that's off now is the <textarea> in FireFox.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles