Input and Hover button states not aligned

  • Hello,
    I’m trying to add a subscription form to my site. It’s working fine, but for some reason to enter text into the fields or click the submit button, you need to put the cursor right near the top of the input field or submit button.

    Can see it in action here: https://www.ehimabo.com. It’s the form under the banner.

    I haven’t encountered this problem before. I’ve tried tweaking some CSS but am not sure what is causing this.

    Here’s the CSS for the form:

    /* this would be the color and size of the main bar */
#nsu-head {
	background-color: #3CB878;
	padding: 4px;
}
/* basic text color and placement */
#nsu-head p {
	float:left;
	color: whiteSmoke;
	margin-top:-15px;
	padding-right:10px;
}
/* placement of the invitation text */
#nsu-head p.form_label {
	text-transform:uppercase;
	padding-left: 50px;
	padding-right: 30px;
	margin-top: -5px;
}
#nsu-form-1 label {display:none;} /* hides the input field labels */
/* input button styling going for a circle with drop shadow */
input#nsu-submit-1 {
	border-radius: 100%;
	padding: 10px 15px 5px 15px;
	margin-top: -8px;
	width:80%;
	font-size: 1.3rem;
	word-wrap:break-word;
	font-weight: bold;
	color:whitesmoke;
	font-family:'Satisfy';
	-moz-box-shadow: 1px 2px 4px #555;
	-webkit-box-shadow: 1px 2px 4px #555;
	box-shadow: 1px 2px 4px #555;
}
/* controls the background color during inactive and hover states */
input#nsu-submit-1.nsu-submit {
background: no-repeat darkMagenta;
border: 1px solid darkMagenta;
}
input#nsu-submit-1.nsu-submit:hover {
background: no-repeat black;
border: 1px solid black;
}

    Also, the “START” button is supposed to be a circle as defined by the CSS but that’s not working for some reason.

    Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Looks to me to be more a site issue related to how the form plugin adds it’s source code withing your slider. Until that is remedied, a fix will be hard pressed. Try deactivating any plugins not associated with the ‘nsu’ form and ask theme provider best method to remove output of slider regardless of actually using that option.

    Thread Starter Cygnus X-1

    (@cygnus-x-1)

    OK. Thanks for your reply and suggestions. Not sure if I’ll be able to resolve, but will see if can figure out, or maybe there’s another plugin out there I can use to make a similar opt-in form that I can associate with my Mail Chimp account.

    The margin on #home-slider-wrap is positioning the slider over the form, hence why the form is inaccessible. This one:

    #home-slider-wrap {
position: relative;
margin: -30px -25px 25px;
border-bottom: 5px solid #eee;
}

    Remove the margin and the form functions as normal.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Input and Hover button states not aligned’ is closed to new replies.

Tags