Archived

This topic is now archived and is closed to further replies.

  • 0

Using an image for submit button

Question

Posted · Report post

Hi Guys,

 

I'm just customizing another Pagelines install, and I'd like to change the submit button/general form button to an image instead of the usual css type.

Although the place I'm specifically using it is in a widget, my css seems to be being ignored in IE9 and overwritten with the default pagelines css gradient. Does anyone have any idea why it's not working in IE9?

 

Here's the code I'm using:

 

.mc_signup_submit input {
      background: url(http://www.justinphnoble.com/kidrox/wp-content/uploads/2013/03/subscribe.png) no-repeat 0 0;
      width: 164px;
      height: 47px;
      border: 0px solid #FFFFFF;
box-shadow: none;  
}
.mc_signup_submit input:hover {
      background: url('http://www.justinphnoble.com/kidrox/wp-content/uploads/2013/03/subscribe.png') no-repeat 0 0;
      width: 164px;
      height: 47px;
      border: 0px solid #FFFFFF;
box-shadow: none;  
}

 

You can see it in action in the email form on the right hand side. Works perfectly in Chrome and Firefox, but not in IE9.

http://www.justinphnoble.com/kidrox/

 

Any ideas, or any pointers on how to make it fail gracefully would be much appreciated.

 

Thanks

 

Justin

 

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

Hi Justin,

 

Unfortunately, we are unable to provide support to user created code. However, I would recommend you install the the Browser Specific CSS plugin and use the:

 

.chrome

.firefox

.safari

 

Classes on your custom button code. This will result in your custom button image being used on the browsers listed above but not IE, which should use the default code.

 

Once the plugin is installed/activated, use these classes in your code for example:

 

 

 

.chrome .mc_signup_submit input, .firefox .mc_signup_submit input, .safari .mc_signup_submit input { }

.chrome .mc_signup_submit input:hover, .firefox .mc_signup_submit input:hover, .safari .mc_signup_submit input:hover { }

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Danny. Will give it a try :)

Share this post


Link to post
Share on other sites

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites

Posted · Report post

Just a quick update... I gave up trying to use an image as it just didn't look right, but I did get a nice pure css button to work with the browser specific CSS button and it was actually remarkably easy in the end :) Have added that plugin to my favourites list now!

Share this post


Link to post
Share on other sites

Posted · Report post

Cool! 

Share this post


Link to post
Share on other sites