form falls apart in browsers

when viewed in Firefox and netscape my form falls apart. The form is created in a table using easiForm. http://www.shybuckstudios.com/work/form.php

any suggestions are appreciated


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What do you mean falls apart, do you mean the surrounding line on the fields looks strange? this is not the easiForm action, you are styling your fields with a background colour…

Freeway seems to have a strange affect when applying background colour to form fields, it explains this in the Form Elements Styler Read Me file:

  • IMPORTANT:
  • If you style your text fields or text areas with a coloured fill then
  • you should make those text fields and textareas a smaller size than the px size
  • set with the ‘Form element styler’ action.
  • For some reason a coloured background in these elements will flood out to the size
  • of the element as set on the Freeway page if that is larger than the styled size set
  • in the action.

So in other words, make the fields about 30 wide and see if that corrects the strange looking double border line.

Mike

On May 2, 2008, at 7:28 PM, shybuckstudio wrote:

when viewed in Firefox and netscape my form falls apart. The form is created in a table using easiForm. http://www.shybuckstudios.com/work/form.php

any suggestions are appreciated


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

the text on the form does not line up with the text field …looks like the fields all shift down. The captch shows up behind the text field.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

if you view this in Netscape or Firefox you will see what I mean about falling apart. It appears OK in Safari


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

This is what I explained to you a few weeks back:

To avoid this you need to * not * use layers or place the error text so that the errors do not overlay the other elements below, so if you are using a table then make the cell the PHP easiForm Errors is applied to long enough to take the error text without overlapping, like 40 or so.

If you then set the text to align bottom the text that shows initially when the form loads will be down towards the form elements and not 40px above.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK so all I do is turn off the blue CSS button?The text copy for the errors reads wrong how do I get to the code to change this? Here’s how it reads:4. Math answer incorrect! Please try Math answer incorrect! Please try again. Don’t ask me how this occured.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I also see you haven’t given your form fields a width in the Form Element Styler action, you should do this and make the fields smaller length wise than you set the width in the action so you don’t get the double line ‘syndrome’:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What do you have typed in the error text field of the PHP easiForm Action? scroll through the field text you have entered from left to right.

On 2 May. 2008, 6:22 pm, shybuckstudio wrote:

OK so all I do is turn off the blue CSS button?The text copy for the errors reads wrong how do I get to the code to change this? Here’s how it reads:4. Math answer incorrect! Please try Math answer incorrect! Please try again. Don’t ask me how this occured.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

but Mike I have given the fields a width in the Styler …it’s set at 228. I’ve also taken the color out of the fields and I still get get the double line ‘syndrome’:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It seems you are still having problems, if you can send the Freeway
file to me at I will take a look again for you.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Please tell me that something other than Freeway 5 was used to generate this form…

I picked the html apart and was sorely disappointed by the form code there. Visually, it is readable – but the “labels” (which are not presented as labels) are not connected to the actual form elements (which are not actually connected to each other). For a human being to code this way would be insanely laborious - I do not think it an improvement for a program to simplify bad coding practices.

What seems to me to be causing the majority of the problem (at least what I think is intended vs. what I think is not) are duplicate ID names. ID tags identify particular structures in a document and duplicate names on a page are definitely forbidden. This page is a good example of why they are.

When you finally find the form fields in the code, you see that each field is wrapped in a div structure (css boxes in Freeway). The first one - for the respondants comments - is given the ID name “textarea”. Within that div is the textarea form element (that is its proper name) which is also given the ID of “textarea”. Two different structures, same ID name.

Then there is a style called “#textarea” – the pound symbol being shorthand for ID, so a style named this way will apply to everything with an “ID” of “textarea”. The double line occurs because the browser is doing just what it has been asked to do… apply the style to these two different items that have the same ID name.

Not knowing exactly how the “form” was constructed, the easiest change to make is to change the ID name of the div elements – in Freeway, divs get their ID names from the Inspector. By altering the div name so as to be unique and different from the ID of the form fields, the double lines disappeared.

On Fri, May 2, 2008 at 10:28 AM, shybuckstudio wrote:

when viewed in Firefox and netscape my form falls apart. The form is created in a table using easiForm. http://www.shybuckstudios.com/work/form.php

any suggestions are appreciated


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

Okay, one more thing that bothers me. The line “Fields marked in bold are needed.” is not wrapped in any text tags. It is preceded by non-breaking spaces and a regular space, all of which are wrapped in p text tags. That one line is not wrapped in any kind of text tag. That means there is no control whatsoever over how that text will be styled by each and every browser that views the page. Further, this casts doubt on how search engines and non-visual browsers will interpret this text. It has no semantic context.


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

This is because the user has not applied a style to the cell that has
the text.

On May 3, 2008, at 1:53 AM, Ernie Simpson wrote:

Okay, one more thing that bothers me. The line “Fields marked in
bold are needed.” is not wrapped in any text tags. It is preceded by
non-breaking spaces and a regular space, all of which are wrapped in
p text tags. That one line is not wrapped in any kind of text tag.
That means there is no control whatsoever over how that text will be
styled by each and every browser that views the page. Further, this
casts doubt on how search engines and non-visual browsers will
interpret this text. It has no semantic context.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On May 3, 2008, at 1:43 AM, Ernie Simpson wrote:

Please tell me that something other than Freeway 5 was used to
generate this form…

I picked the html apart and was sorely disappointed by the form code
there. Visually, it is readable – but the “labels” (which are not
presented as labels) are not connected to the actual form elements
(which are not actually connected to each other). For a human being
to code this way would be insanely laborious - I do not think it an
improvement for a program to simplify bad coding practices.

What seems to me to be causing the majority of the problem (at least
what I think is intended vs. what I think is not) are duplicate ID
names. ID tags identify particular structures in a document and
duplicate names on a page are definitely forbidden. This page is a
good example of why they are.

When you finally find the form fields in the code, you see that each
field is wrapped in a div structure (css boxes in Freeway). The
first one - for the respondants comments - is given the ID name
“textarea”. Within that div is the textarea form element (that is
its proper name) which is also given the ID of “textarea”. Two
different structures, same ID name.

Then there is a style called “#textarea” – the pound symbol being
shorthand for ID, so a style named this way will apply to everything
with an “ID” of “textarea”. The double line occurs because the
browser is doing just what it has been asked to do… apply the
style to these two different items that have the same ID name.

The reason for the names is because the user has named the items this
way, yes, it is more logical to call a comments field ‘comments’.

Not knowing exactly how the “form” was constructed, the easiest
change to make is to change the ID name of the div elements – in
Freeway, divs get their ID names from the Inspector. By altering the
div name so as to be unique and different from the ID of the form
fields, the double lines disappeared.

I respect your judgement Erns but I think the double lines are related
to Freeways handling of setting a fill to fields that are styled to be
shorter than the charlength that Freeway has been given for the fields
in the inspector, at least in my tests that has been the issue
although personally I have never experimented with the field and
textarea names so that could also be an issue as you mention…
although the other 3 fields are named #name, #email & #httpfield and
the problem is with those fields also.

Mike


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Mike, I’ve sent you my form page along with the thanks page.
thanks for lookin this over.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK so Big Earns is mentioning “identicle ID tags” Translated this means naming the the text fields and text area fields a name other then ie: “textfield”?

“Fields marked in bold are needed.”is not wrapped in any text tags. From what I’ve read I understand this to mean that the html element that text is in needs to be styled.

I’ve styled this the way I know how. I’ve selected the html element, where the copy is located, double clicked, and selected the style form the menu. but the style does not translate to the copy .

So what am I doing wrong?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I would recommend naming fields for what they mean to you, and naming
them uniquely in all cases.

If you had this form (obviously better aligned):

Name: []
Age: [
]
Favorite Sandwich: [_____________]
Comments: ±-----------------------+
| |
| |
| |
| |
±-----------------------+

I would mark it up as this:

input type=“text” id=“name” name=“name”

input type=“text” id=“age” name=“age”

input type=“text” id=“favorite_sandwich” name=“favorite_sandwich”

textarea rows=“8” cols=“20” id=“comments” name=“comments”

I would lay the form out in a table, either manually drawn or
inferred by starting the design process with the Big Blue Button off.
When you have the button on, Freeway draws a separate DIV for each
form element, and because it’s not clear when you have the form
element or its container DIV selected, it is all too easy to get the
two confused and apply the same ID to the parent as the child. (It
shouldn’t be physically possible to do this in Freeway, but it may be
possible to fool an Action into creating duplicate IDs within the
same page.)

Walter

On May 3, 2008, at 11:21 AM, shybuckstudio wrote:

OK so Big Earns is mentioning “identicle ID tags” Translated this
means naming the the text fields and text area fields a name other
then ie: “textfield”?

“Fields marked in bold are needed.”is not wrapped in any text tags.
From what I’ve read I understand this to mean that the html element
that text is in needs to be styled.

I’ve styled this the way I know how. I’ve selected the html
element, where the copy is located, double clicked, and selected
the style form the menu. but the style does not translate to the
copy .

So what am I doing wrong?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On May 3, 2008, at 5:21 PM, shybuckstudio wrote:

OK so Big Earns is mentioning “identicle ID tags” Translated this
means naming the the text fields and text area fields a name other
then ie: “textfield”?

You call the field comments so why not comments

“Fields marked in bold are needed.”is not wrapped in any text tags.
From what I’ve read I understand this to mean that the html element
that text is in needs to be styled.

Apply a style to the cell the action is applied to

I’ve styled this the way I know how. I’ve selected the html
element, where the copy is located, double clicked, and selected
the style form the menu. but the style does not translate to the
copy .

So what am I doing wrong?

Double clicked, why? you need to apply the style to the cell or HTML
item:

1# Select the cell or HTML item
2# Select a style


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Melanie,

I think you totally misunderstand the use of a table, you have used a
non layered table to hold the form together nicely and then set all
the elements in layers over the top of it! while you should be placing
the items * in * the cells of the table.

1# Copy each form element one by one (except the submit button),
delete the one you copied and then place the cursor * inside * the
cell where you want the element to be and then paste.

2# Create a style called say easistyle (for example), no p tag or any
other tag.

3# Select the cell the PHP easiForm Errors action is applied to and
then select the easistyle

4# Do the same with the cell the PHP easiCaptcha action is applied to.

5# Place your cursor at the end of the text in each of the cells that
has form element title text and pless the delete kwy once. You have a
return at the end of each of these text titles so the sit up rather
than in the midle as you have selected in the inspector.

6# Select each cell there is a form element in (except the textarea
cell) and then celect to align vertically to the middle.

7# Select the cell the PHP easiCaptcha action is applied to then in
the Actions window for that action select the ‘Captcha Invalid! Please
try again’ checkbox

8# While the PHP easiCaptcha cell is selected you should remove the
‘Form Element Styler’ action from that cell, it is not selected to do
anything and it does not need to be applied there, it is for form
elements (text fields, menus etc) not cells.

9# I suggested and even made a text button for you a couple of weeks
ago for your form, as I explained it is better to do that than set
layers on top of each other to make a button, the way you are doing it
causes problems such as the text area is not being active etc, so…
if you make the button as the example I showed you a few weeks back
then this issue will be solved also.

When you create you new text for a submit button then do the same as I
explained with the other form elements, import the image into a
graphic item and paste it into the cell, then add a PHP easiForm
Elements action to that also.

I have corrected these issues and sent you back the FW site form you
sent me, I have inserted the submit form graphic into the cell but
removed the layers you added to it, so you will need to use your
submit button base graphic and add the text Submit (or whatever) to
the image and then import the new image into the graphic item (that is
now a blank button graphic) and you will have that side up and running
also.

Doing all the above will correct the issues you are having.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

BTW, 9 pt is really small text for your form, might also help the look if you pump it up to 11

Mike


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options