Modify Submit Button to Image

[industrialpost]

The code suggestion that Mike gave didn't work. I was testing on IE 6. Upgraded to IE 8. Not sure what to do. Text over image doesn't show up in Safari, Firefox, or Google Chrome. ARG!!!! DAMN IE!!!! I will see what I can dig up in the other threads. Thanks for your help thus far. Industrialpost.com

[Lhotch]

Your best bet may be to do a search on google since this isnt a 68C specific thing.

http://www.ampsoft.net/webdesign-l/image-button.html

[industrialpost]

Sure I can do that. However, I can't imagine that I am the only one that has wanted to change a form submit function from that of text to an image. Seriously? What I mean, is that no one else has been able to tackle this one when making sure that their code looks presentable across all major browsers? Case in point IE?

[Mike-N-Tosh]

First that I've seen on here in my 3+ years here. Of course that doesn't mean someone hasn't done it and I'm sure that it can be done. I haven't tried it, but as it is a bug specific to IE, then more than likely it is a specific bug with hack fixes. Larry's suggestion is probably your quickest resolution to the issue. Any search for CSS/HTML fixes for IE will probably lead you to an answer.

[industrialpost]

Great. Ok thanks for the key words to Google with. I came up with a site that gave a really good explanation for solving this curve ball.

IE not interpreting text-indent on submit buttons ? | Productivedreams.com

However, since I have IE 8 installed instead of IE 6, I needed to remove the one line. Here is what the site suggested to add to your CSS for the submit image:

font-size: 0px;
display:block;
line-height: 0px;

But like I said, this didn't work for me because it dropped the image down to the next line. So I just removed the

font-size: 0px;
display:block;

lines and it works great!

Hope this helps everyone else with their IE woes!!

[Mike-N-Tosh]

Thanks for posting back the solution that you found. Hopefully others will benefit from that. Thank you for taking the time to do so.

[seymourjames]

That is good. So you will need to use conditional css so it loads for the browsers you want. For example,

<link rel="stylesheet" href="templates/{$smarty.const.MAIN_TEMPLATE}/css/style.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="templates/{$smarty.const.MAIN_TEMPLATE}/css/ie.css" type="text/css" />
<![endif]-->

this would be for all I.E versions. There is a thread all about extending this principle to individual I.E versions.

We do what you ask in the Nustyle template but it is too long winded to put all the code here. PM me if you want the code that you can modify with you own image etc.