Jump to content
justinn

Using an image for submit button

Recommended Posts

justinn    0
justinn

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
Danny    1,327
Danny

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 { }

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
justinn    0
justinn

Thanks Danny. Will give it a try :)

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
justinn    0
justinn

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
Danny    1,327
Danny

Cool! 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×