gforster
Member
I have multiple optin forms that are working correctly at alisonlumbatis.com
However, the one at the bottom of http://alisonlumbatis.com/team-expressionista is not behaving like the others.
I would like the submit button to the right of the other fields and it should change color when hovered over (image is a sprite). It should look the same as the one at the bottom of http://alisonlumbatis.com/archives/180
One issue I see is that you have JQuery embedded twice in your site code, once in your footer and once in your header, and it should only be in their once. Also, you have JavaScript that uses JQuery before JQuery is embedded. You should probably change those things around.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>As for your styling issue, I'm not really sure on that part yet.
gforster
Member
OK, I got all of the placement and such worked out - one problem left: What should be showing for the :hover is now showing as default and when hovering, nothing happens. Here's my CSS for the relevant sections.
[css]
#gform_wrapper_7 .gform_footer input.button, #gform_wrapper_7 .gform_footerinput[type="submit"] {
background: transparent url(images/single_sign_up.png) 0px 0px no-repeat;
border: none;
height: 103px;
width: 103px;
text-indent: -99999px;
}
#gform_wrapper_7 .gform_footer input.button, #gform_wrapper_7 .gform_footer input[type="submit"]:hover { background-position: 0px -103px; }You have a minor typo on your hover selector, you are missing one. Also in your first selector you are missing a space in between .gform_footer and input. Compare mine to yours and try this:
[css]
#gform_wrapper_7 .gform_footer input.button, #gform_wrapper_7 .gform_footer input[type="submit"] {
background: transparent url(images/single_sign_up.png) 0px 0px no-repeat;
border: none;
height: 103px;
width: 103px;
text-indent: -99999px;
}
#gform_wrapper_7 .gform_footer input.button:hover, #gform_wrapper_7 .gform_footer input[type="submit"]:hover { background-position: 0px -103px; }