75865

Image Button Displaying “Submit” Over Top of Image in Chrome

Question:

I have a problem similar to <a href="https://stackoverflow.com/questions/8977520/image-button-displaying-submit-query-over-the-top-of-image-in-firefox" rel="nofollow">this guy's</a>, 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>

Answer1:

In your CSS add the following:

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

This will hides the texts, if any.

Answer2:

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...

<blockquote>

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.

</blockquote> 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

Recommend

  • Can I manage incomplete class objects using STL containers?
  • Codeigniter Permission denied images upload
  • error: expected unqualified-id before string constant
  • JScrollPane problem
  • Vim: Match whitespace between braces but not on new lines
  • Good pattern for hiding ion-nav-bar on login and not having a back button just after login?
  • PHP DOMDocument / XPath: Get HTML-text and surrounded tags
  • Show outbound texts using SMSManager in the default android text application
  • Delphi: How to set the default project in a project group?
  • auto indent code in html file (generator/tool)?
  • Python: Facebook Graph API - pagination request using facebook-sdk
  • in node.js, how to pass variables to :stylus filter from jade?
  • MSVC 2015 /Wall has lots of not useful messages
  • It seems that not all of my HTML page loads in some browsers
  • Add custom information to HockeyApp crash report
  • After message type e, program doesn't return to selection-screen ABAP
  • css Star-rating html
  • Performance difference between accessing local and class member variables
  • C++ development on linux Code::Blocks, EMACS or GVIM [closed]
  • Flot returns incorrect x value (mm/dd/yy - date) after zoom for stack bar chart
  • 'Enemy' was not declared in this scope?
  • How does ActiveSupport do month sums?
  • PayPal API Listener Website Payments Standard URI
  • redirect_to root_url and return unless @user.activated
  • Adjust width of select element according to selected option's width
  • Custom validator control occupying space even though display set to dynamic
  • Google Custom Search with transparent background
  • Change multiple background-images with jQuery
  • Insert into database using onclick function
  • What is Eclipse's Declaration View used for?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Modifying destination and filename of gulp-svg-sprite
  • Can I make an Android app that runs a web view in Chrome 39?
  • Change an a tag attribute in JavaScript based on screen width
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Angular 2 constructor injection vs direct access
  • Java static initializers and reflection
  • Change div Background jquery
  • Android Google Maps API OnLocationChanged only called once
  • UserPrincipal.Current returns apppool on IIS