X
Tap here to go to the mobile version of the site.

Support Forum

Form checkboxes and buttons don't show up on my site in Firefox.

Posted

I have a sign-up form on my site. The checkboxes and radio buttons don't show up in Firefox. They do show and function in all of the other browsers I've tested. I tried unchecking the Do not Track option but that didn't change anything. The plugin developer says it's the CSS of the Wordpress theme I'm using. The theme developers don't seem to have an aswer. Doe anyone have an idea of how to get the buttons to show? Here's the site:

www.yodelinghalloffame.com

Image attached for reference.

Thanks! Terry

I have a sign-up form on my site. The checkboxes and radio buttons don't show up in Firefox. They do show and function in all of the other browsers I've tested. I tried unchecking the Do not Track option but that didn't change anything. The plugin developer says it's the CSS of the Wordpress theme I'm using. The theme developers don't seem to have an aswer. Doe anyone have an idea of how to get the buttons to show? Here's the site: www.yodelinghalloffame.com Image attached for reference. Thanks! Terry
Attached screenshots

Chosen solution

Hi Terry, yes, there is a style rule in your theme which is causing this odd behavior. Please see the attached screen shots.

But the story should not stop there, since this appears to be a paid theme (https://premium.wpmudev.org/projects/.../themes/), I suggest escalating the issue to the theme publisher for a solution.

If that is unavailing you (or your designer) may need to insert some custom CSS to override that rule.

Read this answer in context 1

Additional System Details

Installed Plug-ins

  • Adobe® Acrobat® Plug-in for Web Browsers, Version 15.010.20060
  • Creative Cloud Desktop Plugin.v_3_0_0_0
  • Plugin that detects installed Citrix Online products (visit www.citrixonline.com).
  • Provides information about the default web browser
  • 6.3.0.0
  • The Flip4Mac WMV Plugin allows you to view Windows Media content using QuickTime.
  • Garmin Communicator Plug-in Version 4.0.3.0
  • Garmin Communicator Plug-in Version 4.1.0.0
  • Displays Java applet content, or a placeholder if Java is not installed.
  • Microsoft Office for Mac SharePoint Browser Plug-in
  • Shockwave Flash 21.0 r0
  • iPhoto6

Application

  • User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:45.0) Gecko/20100101 Firefox/45.0

More Information

jscher2000
  • Top 10 Contributor
8197 solutions 67055 answers

Chosen Solution

Hi Terry, yes, there is a style rule in your theme which is causing this odd behavior. Please see the attached screen shots.

But the story should not stop there, since this appears to be a paid theme (https://premium.wpmudev.org/projects/.../themes/), I suggest escalating the issue to the theme publisher for a solution.

If that is unavailing you (or your designer) may need to insert some custom CSS to override that rule.

Hi Terry, yes, there is a style rule in your theme which is causing this odd behavior. Please see the attached screen shots. But the story should not stop there, since this appears to be a paid theme ([https://premium.wpmudev.org/projects/category/themes/]), I suggest escalating the issue to the theme publisher for a solution. If that is unavailing you (or your designer) may need to insert some custom CSS to override that rule.
jscher2000
  • Top 10 Contributor
8197 solutions 67055 answers

This is the problem part of the global.css style sheet (starting line 568):

/* Firefox checkboxes and radios are styled to match the rest of the browsers */
@-moz-document url-prefix() {
  input[type=checkbox] {
    /* original check box are push outside the viexport */
    position: absolute ;
    left: -1000em !important;
  }

Then at line 626:

  input[type=radio] {
    /* original check box are push outside the viexport */
    position: absolute ;
    left: -1000em !important;
  }

Injecting this at the end of the page overrides it, but I'm not sure how easy it is to insert custom CSS in your theme:

input[type="checkbox"],input[type="radio"]{
  position: static !important;
}
This is the problem part of the global.css style sheet (starting line 568): /* Firefox checkboxes and radios are styled to match the rest of the browsers */ @-moz-document url-prefix() { input[type=checkbox] { /* original check box are push outside the viexport */ position: absolute ; left: -1000em !important; } Then at line 626: input[type=radio] { /* original check box are push outside the viexport */ position: absolute ; left: -1000em !important; } Injecting this at the end of the page overrides it, but I'm not sure how easy it is to insert custom CSS in your theme: input[type="checkbox"],input[type="radio"]{ position: static !important; }

Question owner

jscher2000, That is exactly what I needed to know. I will share that with wpmudev. They are already trying to help but I wanted to cover all of my bases. This should put me on the right track. Can't thank you enough, but... Thanks! Terry

jscher2000, That is exactly what I needed to know. I will share that with wpmudev. They are already trying to help but I wanted to cover all of my bases. This should put me on the right track. Can't thank you enough, but... Thanks! Terry

Question owner

jscher2000, That fixed the problem! A million thanks for your help! Terry

jscher2000, That fixed the problem! A million thanks for your help! Terry