Help: Wordpress submit button image replacement (hover))

Hey guys, I'm pulling my hair out over here. I hope you can help. It would be much appreciated.

I'm customizing a wordpress theme and have an email capture form plugin (WP Email Capture) with name-email-submit button. The form is very basic and I am changing the submit button to an image rollover button. I am working with MAMP on a local host to view instead of being live.

I could be going about this all wrong because I'm a bit of a newb.

My problem:

The rollover and the button works but I have this damn border around the button an it is driving me crazy! I can't get rid of the border. Also, The button shows up like it can't find the image. Why is this happening? When I remover the src="my image" it show the text "submit" and the border. What do I need to do here? lol

<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" size="42" type="text" class="wp-email-capture-name"><br/>

<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" size="42" type="text" class="wp-email-capture-email"><br/>

<input type="hidden" name="wp_capture_action" value="1">

<input name="input" type="image" height="37" width="115" src="subscribebtn.jpg" class="wp-email-capture-submit" font-size="0" line-height="0" border="0" value="" >

</form>

#wp_email_capture {

}

#wp_email_capture label {
text-decoration: none;
border:none;
}

#wp_email_capture input {
margin: 15px 0 0 0;
line-height: 15px;
text-decoration: none;
border:none;

}

#wp_email_capture_2 {

}

#wp_email_capture_2 label {

}

#wp_email_capture_2 input {

}

input[type=image] {
height: 37px;
width: 115px;
background-image:url(../../plugins/wp-email-capture/inc/subscribebtn.jpg);
text-decoration: none;
border:0;
display: block;
text-indent: -999em;
}
input:hover[type=image] {
height: 37px;
width: 115px;
background-image:url(../../plugins/wp-email-capture/inc/subscribebtnon.jpg);
text-decoration: none;
border:0;
display: block;
text-indent: -999em;
}

http://img7.imageshack.us/img7/5703/screenshot20111105at416.png

This is what is looks like when I remover the src="myimage" from the html
http://img41.imageshack.us/img41/1565/screenshot20111105at417.png

Any help would be amazing. Thanks in advance!

I do not know at all what and to what code you write. I actually wanted to ask you. Do you know the name of the theme on this website (http://fagela.com/activity)?. I'll try to find through google bro.......... CaN u HELP ME?????

Source code says it is twentyten theme.

So nobody has any idea about why my button is doing this?

try


button.wp-email-capture-submit {
outline: none;
border: none;
}


what browsers is the border showing up in?



on a side note, I don't believe this has full browser support & I believe they are suppose to have ""
http://kimblim.dk/css-tests/selectors/

input[type="image"]
input:hover[type="image"]

Thanks for the tips. I tried both but it didn't change it. This is totally mind boggling to me. I have tried all kinds of stuff and cant figure this out.

It seems to view correctly in firefox but not in chrome or safari. I cannot check IE.

is there anyway you could post a live link? or the full code

if you can, then consider this problem solved :D these little things are easy when you use inspect element

I could post live but I could post the full code. Full of html as well as css?

yes, live is preferred but full code will do

FORM CODE

<?php



function wp_email_capture_form($error = 0)

{

$url = get_option('home');
$url = addLastCharacter($url);

?> <div id="wp_email_capture"><form name="wp_email_capture" method="post" action="<?php echo $url; ?>">

<?php if (isset($_GET["wp_email_capture_error"])) {

$error = sanitize($_GET["wp_email_capture_error"]);

echo "<div style='width:80%;background-color: #FFCCCC; margin: 5px;font-weight'>Error: ". $error ."</div>";

} ?>

<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" size="42" type="text" class="wp-email-capture-name"><br/>

<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" size="42" type="text" class="wp-email-capture-email"><br/>

<input type="hidden" name="wp_capture_action" value="1">


<input name="input" type="image" height="37" width="115" src="subscribebtn.jpg" class="wp-email-capture-submit" font-size="0" line-height="0" border="0" value="" >


</form>

</div>

<?php if (get_option("wp_email_capture_link") == 1) {

echo "<p style='font-size:10px;'>Powered by <a href='http://www.gospelrhys.co.uk/plugins/wordpress-plugins/wordpress-email-capture-plugin' target='_blank'>WP Email Capture</a></p>\n";

}

}



function wp_email_capture_form_page($error = 0)

{

$url = get_option('home');
$url = addLastCharacter($url);

$display .= "<div id='wp_email_capture_2'><form name='wp_email_capture_display' method='post' action='" . $url ."'>\n";

if (isset($_GET["wp_email_capture_error"])) {

$error = sanitize($_GET["wp_email_capture_error"]);

$display .= "<div style='width:80%;background-color: #FFCCCC; margin: 5px;font-weight'>Error: ". $error ."</div>\n";

}

$display .= "<label class='wp-email-capture-name'>Name:</label> <input name='wp-email-capture-name' type='text' class='wp-email-capture-name'><br/>\n";

$display .= "<label class='wp-email-capture-email'>Email:</label> <input name='wp-email-capture-email' type='text' class='wp-email-capture-email'><br/>\n";

$display .= "<input type='hidden' name='wp_capture_action' value='1'>\n";

$display .= "<input name='Submit' type='submit' value='Submit' class='wp-email-capture-submit'></form></div>\n";

if (get_option("wp_email_capture_link") == 1) {

$display .= "<p style='font-size:10px;'>Powered by <a href='http://www.gospelrhys.co.uk/plugins/wordpress-plugins/wordpress-email-capture-plugin' target='_blank'>WP Email Capture</a></p>\n";
}



return $display;

}



function wp_email_capture_display_form_in_post($content)

{

$get_form = wp_email_capture_form_page();

$content = str_replace("[wp_email_capture_form]", $get_form, $content);

return $content;

}





?>

hm do you have the css for it?

The CSS is huge, lol. WP Email Capture css is at the very bottom.

EDIT: code was to long to post so i just posted the css in question




/***** NEWSLETTER EMAIL CAPTURE ********************/


#wp_email_capture {
outline: none;
border: none;
}

#wp_email_capture label {
text-decoration: none;
border:none;
outline: none;

}

#wp_email_capture input {
margin: 15px 0 0 0;
line-height: 15px;
text-decoration: none;
border:none;
outline: none;


}

#wp_email_capture_2 {

}

#wp_email_capture_2 label {

}

#wp_email_capture_2 input {

}

input[type="image"] {
height: 37px;
width: 115px;
background-image:url(../../plugins/wp-email-capture/inc/subscribebtn.jpg);
text-decoration: none;
border:0;
display: block;
text-indent: -999em;
outline: none;

}
input:hover[type="image"] {
height: 37px;
width: 115px;
background-image:url(../../plugins/wp-email-capture/inc/subscribebtnon.jpg);
text-decoration: none;
border:0;
display: block;
text-indent: -999em;
outline: none;

}

post the live version then, the code you gave me is not enough

there are a lot of free web servers out there in case you need a temporary one

Ok I just ran the inspector in chrome from my local host preview page of the site. It seems it can't find my src image in the html. I don't know why because everything is linked correctly. I even tried changing it a few times because I thought that might have been the problem yesterday. How can I get it to link correctly?

lol I am not a mind reader, I just need a live view

It's treating this as a broken link to an image.

<input name="input" type="image" height="37" width="115" src="subscribebtn.jpg" class="wp-email-capture-submit" font-size="0" line-height="0" border="0" value="" >

lol ok so I need to load the site somewhere? lol

http://www.***************/

grrrrr

http://www.000webhost[dot]com/

ok thanks! I will set it up.

Well, I got it to work. For some reason I had to type the entire file path for the image to show. I didn't have to do that on any of my other images. I don't know why I had to on this one! WOW!

Thanks so much for the help. It is appreciated!