Form fields IE and Firefox

HTML & CSS
1

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 www.keenwebdesign.com/marineforlife/gen_contactus.html

Thanks!
Lynn

2

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?)

3

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!

4

Remove the size attribute and give them a width in CSS.

.formfield{
   width: 200px;
}


<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