# Contact form not displaying consistantly across Browsers?

**URL:** <https://forums.realmacsoftware.com/t/contact-form-not-displaying-consistantly-across-browsers/18446>\
**Category:** RapidWeaver Classic\
**Created:** [February 5, 2018, 9:28am UTC](https://forums.realmacsoftware.com/t/contact-form-not-displaying-consistantly-across-browsers/18446 "2018-02-05T09:28:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![marsice](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@marsice](https://forums.realmacsoftware.com/u/marsice)\
**Post date:** [February 5, 2018, 9:28am UTC](https://forums.realmacsoftware.com/t/contact-form-not-displaying-consistantly-across-browsers/18446/1 "2018-02-05T09:28:36Z")

</div>

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](http://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.

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [February 5, 2018, 11:23am UTC](https://forums.realmacsoftware.com/t/contact-form-not-displaying-consistantly-across-browsers/18446/2 "2018-02-05T11:23:23Z")

</div>

> [@marsice](#):
>
> now displays incorrectly using Firefox. Here is a link to the page in question: [www.njaward.com/Contact/contactform.php](http://www.njaward.com/Contact/contactform.php)

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.

---

<div class="post-metadata">

**Author:** ![marsice](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@marsice](https://forums.realmacsoftware.com/u/marsice)\
**Post date:** [February 5, 2018, 12:44pm UTC](https://forums.realmacsoftware.com/t/contact-form-not-displaying-consistantly-across-browsers/18446/3 "2018-02-05T12:44:24Z")

</div>

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](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/f/ff59caea779dfd430e17130f1c1211a789dc17d3.jpg)

---

<div class="post-metadata">

**Author:** ![marsice](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@marsice](https://forums.realmacsoftware.com/u/marsice)\
**Post date:** [February 5, 2018, 12:50pm UTC](https://forums.realmacsoftware.com/t/contact-form-not-displaying-consistantly-across-browsers/18446/4 "2018-02-05T12:50:42Z")

</div>

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

 ![divShot](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/2X/8/86c26bfdd8fd18e1f97139b7e1f03c48118c24ae.jpg)

---

<div class="post-metadata">

**Author:** ![teefers](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/teefers/32/8173_2.png) [@teefers](https://forums.realmacsoftware.com/u/teefers)\
**Post date:** [February 5, 2018, 9:07pm UTC](https://forums.realmacsoftware.com/t/contact-form-not-displaying-consistantly-across-browsers/18446/5 "2018-02-05T21:07:38Z")

</div>

> [@marsice](#):
>
> column-count: 2

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](https://developer.mozilla.org/en-US/docs/tag/CSS%20Multi-column%20Layout)

---

<div class="post-metadata">

**Author:** ![marsice](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@marsice](https://forums.realmacsoftware.com/u/marsice)\
**Post date:** [February 6, 2018, 10:23am UTC](https://forums.realmacsoftware.com/t/contact-form-not-displaying-consistantly-across-browsers/18446/6 "2018-02-06T10:23:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/system/32/25301_2.png) [@system](https://forums.realmacsoftware.com/u/system)\
**Post date:** [February 12, 2018, 10:23am UTC](https://forums.realmacsoftware.com/t/contact-form-not-displaying-consistantly-across-browsers/18446/7 "2018-02-12T10:23:38Z")

</div>

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