Contact form not displaying consistantly across Browsers?

RapidWeaver Classic
1

Hi

For some time now, I have struggled to get the standard RW contact form (modified with CCS Styles) to correctly display across Safari and Firefox.

Currently, it looks correct using Safari, but now displays incorrectly using Firefox. Here is a link to the page in question: www.njaward.com/Contact/contactform.php

Any help that you can offer will be greatly appreciated.

Neil.
PS. I do not profess to be a ‘programmer’, so I fully expect to have made mistakes in the CSS code that I have put together.

2

I’m not at my Mac right now, but on Firefox for iOS, I don’t see the problem. What isn’t displayed correctly? Since it’s the first time I’ve looked at the page, I might not have noticed what’s wrong.
Also might help if you could include what custom CSS you’ve done.

3

Hi Doug

Thank you for the quick reply.
I have attached a screenshot of how the form appears rendered in Firefox on my Mac.
Also, here is the CSS code that I am using:

.form-input-field { border: 1px #ccc solid; border-radius: 4px; background: white;
}
form { padding: 20px; background: #efefef; border: #ccc solid; border-width: 1px; border-radius: 6px; width: 550px; min-height: 235px;

-moz-column-count: 2;
-moz-column-gap: 0px;
-webkit-column-count: 2;
-webkit-column-gap: 0px;
column-count: 2;
column-gap: 0px;

}

textarea.form-input-field {
width: 255px;
height: variable;
font-size: 12px;
position:absolute; top: 99px; left: 325px;
}
input.form-input-field {
width: 200px;
height: 20px;
font-size: 12px;
}
.Message {
position: absolute; top:78px; left: 326px;
}
.Check {
position: relative; top:115px; left: 1px;
}
form label {
font-size: 13px;
color: black;
}
form {
font-size: 14px;
color: #efefef;
}
input[type=“checkbox”] {position: relative; top: 95px; left: 237px;
}
input[type=“Submit”] {
font-size: 14px;
background: white;
border: 1px solid grey;
color: black;
border-radius: 6px;
height: 28px;
width: 60px;
position: absolute; top: 290px; left: 528px;
-webkit-appearance: none;
-moz-appearance: none;
}
.message-text {
font-size: 15px;
font-weight: bold;
text-align: justify;
}
.message-text span {
font-size: 14px;
font-weight: normal;
color: #990066;
position: absolute; top: 295px; left: 55px;
}

form label {
font-size: 14px;
color: black;
}
I added the following in the form list:

Message:
for .Message in the CSS and
For security, please check box:
for .Check, respectively.

I hope that this helps, and thank you again for your time.

Neil

FormScreen1
FormScreen11266×808 195 KB

4

N.B. the last part of my response should have read:

divShot
divShot1044×152 110 KB

5

I don’t use the built-in contact form, but the CSS you have added looks like your trying to add columns to the form? Using the CSS column property, the browsers will set the column height and at what point the content should flow to the next column. CSS columns provide the “newspaper” column effect, so the columns are close to equal in height.
As you have found different browser engines will render these breaks at various points, leaving widows and orphans. It’s probably not the right approach to take in trying to split a form into columns.
You can try to get the column to break correctly, but chances are when you fix one browser you end up breaking another.
Unfortunately, the built-in contact form has few formatting options. You can spend a lot of time trying to get it to work, and still not get it right. I would suggest you either upgrade to a form stack or plugin or stay with the simple single column form.

https://developer.mozilla.org/en-US/docs/tag/CSS%20Multi-column%20Layout

1 Like
6

Hi Doug

Thank you for your reply - which I really appreciate. I guessed that this might be the case. Out of interest, your reply did prompt me to remove the columns property - without altering anything else… and I stumbled across the result that I wanted!

So, in a sense, I used the columns property as a ‘template’. The form now displays correctly across each Browser.

Thank you once again for your help.

Neil

7

This topic was automatically closed 6 days after the last reply. New replies are no longer allowed.