Cannot fill fields in IE and FF, Chrome is working

How to fix form fields that cannot be filled in Internet Explorer and Firefox.

Overview

The issue is caused by template CSS that adds excessive padding to input fields, making text invisible in some browsers.
Override the problematic CSS by adding a rule with zero padding to your custom stylesheet for the affected input types.

Answered
RU RUETR 30 Jan, 2015
Good morning!

When I open my forms in FF and IE I cannot fill the fields. Checkboxes and Textboxes work but not single line fields.

In Chrome everything works perfect.

Using a RT template. Link to form:

http://welter-tours.de/index.php/reisen-mit-welter-tours/gruppen-anfrage
Gr GreyHead 30 Jan, 2015
Answer
1 Likes
Hi Ruetr,

Your template CSS is adding padding to the inputs so the text becomes invisible.
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
    border-radius: 0;
    color: #4c4436;
    margin: 0;
    padding: 12px 15px;
    vertical-align: middle;
}
You have CSS compression enabled so I can't see exactly which file this is. You probably need to add CSS to your form with padding: 0px !important for these inputs.

Bob
RU RUETR 02 Feb, 2015
Good morning,

I have still problems finding this passage. I disabled Gzip compression. Otherwise I could provide you with FTP or Site access in a PM.

Regards!
Gr GreyHead 02 Feb, 2015
1 Likes
Hi Ruetr,

The CSS compression is still on - it's a template setting somewhere. The filename I see is
<link rel="stylesheet" href="/templates/rt_hadron/css-compiled/master-1f745e5197e1219caa06da8111f57a9c.css" type="text/css">


Bob
RU RUETR 02 Feb, 2015
Thank you very much GreyHead! Found it and added this to my custom.css!

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
padding: 0px 0px;
}
This topic is locked and no more replies can be posted.