PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Submit button css nuked by theme

  1. Hi, I can't figure out why the submit button's CSS formatting is getting messed up my my theme's CSS.

    Form: Go here
    Test client ID code: B2Z

    If you scroll to the bottom of the screen, the form's button doesn't even look like a button and doesn't even change the icon when you scroll over it making it seem like it isn't even a link (clicking the submit will submit the form, however).

    As far as I can tell, my theme uses the following CSS related to forms and input, but I must be missing something along the way here...

    [css]
    .a_button, .a_button span {
    	display: inline-block;
    	-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;
    }
    .a_button {
    	white-space: nowrap;
    	line-height:1em;
    	position:relative;
    	outline: none;
    	overflow: visible; /* removes extra side padding in IE */
    	cursor: pointer;
    	border: 1px solid #999;/* IE */
    	border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */
    	border-bottom:rgba(0, 0, 0, .4) 1px solid;
    	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	box-shadow: 0 1px 2px rgba(0,0,0,.2);
    	background: -moz-linear-gradient(
    		center top,
    		rgba(255, 255, 255, .1) 0%,
    		rgba(0, 0, 0, .1) 100%
    	);/* FF3.6 */
    	background: -webkit-gradient(
    		linear,
    		center bottom,
    		center top,
    		from(rgba(0, 0, 0, .1)),
    		to(rgba(255, 255, 255, .1))
    	);/* Saf4+, Chrome */
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000'); /* IE6,IE7 */
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */
    	-moz-user-select: none;
    	-webkit-user-select:none;
    	-khtml-user-select: none;
    	user-select: none;
    	margin-bottom:10px;
    }
    .a_button.full, .a_button.full span {
    	display: block;
    }
    .a_button:hover, .a_button.hover {
    	background: -moz-linear-gradient(
    		center top,
    		rgba(255, 255, 255, .2) 0%,
    		rgba(255, 255, 255, .1) 100%
    	);/* FF3.6 */
    	background: -webkit-gradient(
    		linear,
    		center bottom,
    		center top,
    		from(rgba(255, 255, 255, .1)),
    		to(rgba(255, 255, 255, .2))
    	);/* Saf4+, Chrome */
    	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
    }
    .a_button:active, .a_button.active {
    	top:1px;
    }
    .a_button.mainCol { background-color: #0BA6C2; }
    .a_button span {
    	position: relative;
    	color:#fff;
    	text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
    	border-top: rgba(255, 255, 255, .2) 1px solid;
    	padding:0.6em 1.3em;
    	line-height:1em;
    	text-decoration:none;
    	text-align:center;
    	white-space: nowrap;
    
    }
    
    .a_button.small span { font-size:10px; }
    .a_button.medium span { font-size:12px; }
    .a_button.large span { font-size:15px; }
    
    /* ============================= forms ============================= */
    #form1 input {
    	margin:0;
    	border:1px solid #ece7e3;
    	background-color:#fff;
    	padding:11px 0 11px 13px;
    	width:335px;
    	box-shadow:none;
    }
    #form1 textarea {
    	resize: none;
    	margin:0;
    	border:1px solid #ece7e3;
    	background-color:#fff;
    	padding:11px 0 5px 13px;
    	width:335px;
    	height:217px;
    	overflow:auto;
    	line-height:18px;
    }
    #form1 label {
    	position:relative;
    	display:inline-block;
    	min-height:45px;
    }
    #form1 .error, #form1 .empty {
    	position:relative;
    	top: -3px;
    	display:none;
    	font-size:10px;
    	line-height:18px;
    	color:#414040;
    	text-transform:none;
    }
    .btns a{
    	margin:15px 0 0 10px;
    }
    /* Form defaults */
      input, select, textarea {
    	font:12px/12px Arial, sans-serif;
    	color: #7c7174;
    }
    
    input#searchsubmit {
    	cursor: pointer;
    	border: none;
    	background-color: #373737;
    	color: #fff;
    	padding: 6px 9px 6px 9px;
    	font-family: 'Droid Sans', sans-serif;
    	font-size: 13px;
    	/*margin-left: 205px;*/
    	float: right;
    	margin-top: -10px;
    	width: auto;
    	text-shadow: 1px 1px 1px #000000;
    }
    input#searchsubmit:hover {
    	background-color: #58bef4;
    }
    
    .comment-form-author input,
    .comment-form-email input,
    .comment-form-url input {
    	margin:0;
    	border:1px solid #363636;
    	background-color:#262626;
    	padding:8px 0 8px 10px;
    	width:265px;
    	box-shadow:none;
    	color: #FFF;
    	text-shadow: 1px 1px 1px #000000;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 11px;
    	font-style: italic;
    	text-transform: none;
    	display: block;
    }
    
    p.form-submit input#submit{
    	text-shadow: 1px 1px 1px #000000;
    	cursor: pointer;
    	background: #0ba6c2;
    	text-align: center;
    	margin-top: 0px;
    	float: right;
    	color: #fff;
    	font-size: 15px;
    	font-family: 'Oswald', sans-serif;
    	border: none;
    	padding: 5px 7px 6px;
    	width: auto;
    	font-style: normal;
    	margin-bottom: 20px;
    }
    
    #comments input {
    	margin:0;
    	border:1px solid #363636;
    	background-color:#262626;
    	padding:8px 0 8px 10px;
    	width:265px;
    	box-shadow:none;
    	color: #FFF;
    	text-shadow: 1px 1px 1px #000000;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 11px;
    	font-style: italic;
    	text-transform: none;
    }
    
    input#submit-comment {
    	text-shadow: 1px 1px 1px #000000;
    	cursor: pointer;
    	background: #0ba6c2;
    	text-align: center;
    	margin-top: 0px;
    	float: right;
    	color: #fff;
    	font-size: 15px;
    	font-family: 'Oswald', sans-serif;
    	border: none;
    	padding: 5px 7px 6px;
    	width: auto;
    	font-style: normal;
    	margin-bottom: 40px;
    }
    Posted 11 years ago on Saturday December 22, 2012 | Permalink
  2. There is a rule in one of the stylesheets which says this:

    [css]
    * {
        border: medium none;
    }

    If you override that for the gform_submit button, you will see the border around the button element again. You might also need to change the font color to something darker since it was dark grey on light grey once I removed the "no border" rule.

    Screenshot http://minus.com/luiy6QR3ulspu

    WIth pagespeed active and the minimizing going, it's hard to tell exactly where that rule is, and with the right click being disabled and the firebug specific CSS, the page is hard to troubleshoot. You will have to find the rule in the stylesheets and come up with the CSS to disable it yourself.

    Posted 11 years ago on Wednesday December 26, 2012 | Permalink