SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Location
    VA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form fields IE and Firefox

    I have noticed a huge difference in form field size between IE and Firefox. Since there's nothing specific about the form design other than it is a scrolling page. How do I make the form fields appear the same length in both IE and Firefox.

    The page to reference is http://www.keenwebdesign.com/marinef...contactus.html

    Thanks!
    Lynn
    ~:*:~ Lynn ~:*:~
    www.primitivecountrygraphics.com, www.keenwebdesign.com,
    I SING: www.lynnkeen.com, TRAVEL GUIDES: www.dcandaway.com
    ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the size attribute and give them a width in CSS.
    Code CSS:
    .formfield{
       width: 200px;
    }

    Code HTML4Strict:
    <form action="" >
    <input type="text" name="name" id="name" class="formfield">
    </form>
    By the way, it is not good practice to mix up divs with tables like you have in your form

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Location
    VA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree with your tables and div's mixing statement, but that is the client's requirement, not mine. Additionally, since the page is based on a 'scroll method, the change to a class="formfield" statement breaks the scrolling capability. Any other options I can try?

    Thanks!
    ~:*:~ Lynn ~:*:~
    www.primitivecountrygraphics.com, www.keenwebdesign.com,
    I SING: www.lynnkeen.com, TRAVEL GUIDES: www.dcandaway.com
    ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~ ~*~

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I don't see how having a class stops the overflow box from scrolling? Just use a class that's not the same as the box holding the form??
    But I wouldn't put a class on every input anyway, becuase I'm lazy. I'd let IE6 users get whatever freaky width their browser wants to use (because frankly the goal is to let them use the form, but unless the client says it MUST also be pretty for them, leave them) and use attribute selectors.

    .formfield input[type=text] {
    width: whatever;
    }

    This will hit everyone but IE6. IE6 will just have default widths on the inputs, but they would all be the same width (it would be consistent within that browser).

    I agree with your tables and div's mixing statement, but that is the client's requirement, not mine.
    The client requests tables? If they're determining markup like that, why aren't they writing it themselves? (unless they have a CMS that inputs tables so they have to stick with tables?)


Bookmarks

Posting Permissions

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