Form element sizes

Elements sizes different in other browsers

[edward301]

I have an email form with the following layout

Name:
________________
¦________________¦ (input:type=text)
Email:
________________
¦________________¦ (input:type=text)
Message:
________________
¦.....................................¦ (input:type=textarea)
¦.....................................¦
¦.....................................¦
¦.....................................¦
¦________________¦

However in safari and iexplorer the text and textarea types with the same values are out of alignment

eg

Name:
________________
¦________________¦
Email:
________________
¦________________¦
Message:
_____________________
¦.................................................¦
¦.................................................¦
¦.................................................¦
¦.................................................¦
¦_____________________¦

is there a html solution to this or i should post in the css section?

[moltar]

Did you set the number of rows and columns for the

<textarea>

element?

The number of columns is measured in number of characters that fits into one row. If your font is monospaced, the same family and the same size, then it should be the same width in both browsers.

[edward301]

These provide perfect alignment in firefox only

textarea cols="50" rows="7"
input type="text" size="67"

[schwartz]

it's going to be very difficult to get form fields to show up exactly the same across browsers:

1. work with ie first and move to firefox
2. you'll need to use css to get tightest control
3. you'll likely need to come up with a comprimise to make it work in all browsers.

[moltar]

Oh, I am sorry. I didn't understand your question right away. You were talking about the width of

<input type="text" />

and

<textarea>

being the same.

In that case you need set the exact width in % in CSS to both form elements. Don't set it to 100%, set it to 85%. It sometimes glitches in some browsers.

[edward301]

Moltar could you be more specific on how to set the %width with css please?

Thanks

[moltar]

input, textarea { 
  width: 85% 
}

It will be set to the 85% of the container's width. If your container is very wide. Then set the containing <form> element to shorter width in pixels. Like:

form { 
  width: 200px; 
}

[SuperNovaCain]

Sorry, I am not at a place where I can test this for you.

schwartz,
I'm curious about your first recommendation...

My personal experience is that, before FireFox, I built most pages in IE first and "tweaked" to make them function in "other" browsers. I've now found that if I build my pages using FireFox as my baseline, I have not even half the tweaking for cross browser functionality and suspiciously enough, generally my efforts are almost all focused on making IE display properly.

What I'm saying is that I find IE to be the exception, not the rule and I find your recommendation dangerously contradictory to what I've experienced.

What am I missing?
Can you elaborate on "why" you made this suggestion?

SuperN¤vaCain

[schwartz]

Can you elaborate on "why" you made this suggestion?

For a "novice", I would suggest focusing on IE simply due to it's percentage of use. :o)

[tedster]

I hear you on that logic,schwartz, but I have also found that what SuperNovaCain says is more practical. Learn to code to standards first, then fix for any exceptions that IE throws up. Development time is much faster that way and you build a better skill set.

If you code for IE's non-standard behaviors, or depend on its error handling to bail you out, then getting the other browsers to work properly after-the-fact can be a nasty process.

[edited by: tedster at 6:52 pm (utc) on June 27, 2005]

[schwartz]

I agree Tedster, and I follow the exact same approach. Just didn't want to confuse the guy with further rabbit trails. :o)

And, looking back at my point, you guys are right. Should've just told him to start with FireFox first.

[edited by: schwartz at 6:54 pm (utc) on June 27, 2005]

[tedster]

I've actually become over-confident recently and sometimes forget to even check my work in IE at all. But the client lets me know rather quickly if something isn't right

[schwartz]

Me too... I hate opening up IE but, ya, have to do it sometimes. ;o)

[edward301]

Thanks for the replys the problem is solved now.

I often have to use browsercam or a similar service to view my sites in safari as it is the only way I can check compatibility.
(safari is 12% of my audience and it is therefore worth checking)

[moltar]

Thanks for the replys the problem is solved now.

I, and I am sure other people in this thread, would like to know what was the solution? Would you mind sharing, as it might help others in future as well.

By the way, there is a great service called BrowserCam for cross browser testing for those that don't like to open IE. ;) And for those that simply don't have access to all major browsers.

They also have one day trial.

[edit]I re-read edward301 message and realised that I wrote exactly the same thing %)[/edit]