Image Button Displaying "Submit" Over Top of Image in Chrome

Question

I have a problem similar to this guy's, but it's happening in Chrome.

Value set as ="", so the fix for the Firefox issue is already in play. This only happens in Chrome and not in Firefox. The code from my search form theme via Wordpress is as follows:

<form method="get" class="searchBox" action="<?php bloginfo('url'); ?>">

<div id="search-form-wrap">



    <input type="text" id="searchBox" name="s" value="" accesskey="4" />

    <input type="image" name="submit" id="searchsubmit" class="nothidden" value="" />



    <?php if ( get_option('k2livesearch') ): ?>



    <?php endif; ?>

<span id="searchreset" title="<?php esc_attr_e('Reset Search', 'k2_domain'); ?>"></span>

        <span id="searchload"></span>

Dhar

Answer 1

In your CSS add the following:

.nothidden {
text-indent: -9999px;
}

This will hides the texts, if any.

Swipple

Answer 2

Sorry for being late but a good answer might be helpful to all who want submit images...

Well I would say why not try to use a real submit type and some CSS like my example below, maybe it's not solved the way you asked for but I believe it's the best way to solve your problems, it will be W3C Valid and it will work in all browsers there is no better way to do this with an image so I kindly ask you to try the code I provided, I hope you'll like the way I would do it...

Your submit line is:

<input type="image" name="submit" id="searchsubmit" class="nothidden" value="" />

Change it to a real submit button:

<input class="nothidden" type="submit" name="submit" id="searchsubmit" value="Your value" /><!--// Add the style below and edit if needed to your style.css file to create what you want! //-->

Well now you would say "I don't want a weird standard submit button!" and I agree! That's why the style below is used, CSS will help us to use a submit type image so please read my CSS below...

You didn't post your css lines so I'm not able to write best css for your project but I hope my answer will be helpful.

    input.nothidden {
border-style: none; /** This is needed to remove borders! **/
display: block;
font-size: 11px; /** Define your font size **/
font-weight: bold; /** Define your font weight **/
height: 23px !important; /** Height of your image **/
/** padding: 4px 0 0; - add some padding if needed... **/
text-align: center; /** Where do you want the text? left, right or center?**/
text-decoration: none; /** Don't want a underline or other decorations? **/
width: 91px; /** Width of your image **/
background: url(http://www.hollandiateam.eu/plaatjes/purple_small.gif) no-repeat scroll 0 0 transparent; /** This is what you want! a image to submit your form and don't  use any javascript, W3C validation and no problems in firefox, Chrome and Internet Explorer! **/
border: none;  /** This is needed to remove image border! **/
color: #080808; /** This is the text color change it to your favorite color **/
} /** The css lines below if you want a hover image sprite or an other hover image, colors etc! **/
   /** use the css below if you would like to have hover changes! **/
input.nothidden:hover {
background-position: 0 -23px; /** example if you're using a sprite image, else use background: url(http://www.hollandiateam.eu/plaatjes/purple_small.gif) no-repeat scroll 0 0 transparent; with the path to your image, if you want to use hover and don't use sprites, you will need to add all css lines used by the input.nothidden class and change image url for hover... **/
color: #0000ff; /** hover text color **/
}

If you use the above code, it will work in all browsers, if you can't get this to work, please post your css and form code and I will edit my answer to fit your needs.

Happy coding

~ Willem

Therapeutics