We help IT Professionals succeed at work.

Button layout issue

Richard Lee
Richard Lee asked
on
Medium Priority
344 Views
Last Modified: 2012-05-11
I am currrenty experiencing some cross browser issue after adapting the sliding door technique found here http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html for a button.

FF, Safari are not happy while the latest versions of IE, Chrome & Opera are fine.
See: http://plumwear.co.uk/contactus.aspx

How do I go about solving the cross browser issues?
Comment
Watch Question

Top Expert 2011

Commented:
Which buttons are you speaking of on your link? The nav buttons?
Richard LeeSoftware Enthusiast
CERTIFIED EXPERT

Author

Commented:
I'm speaking about the submit button and the checkout button.
Top Expert 2011

Commented:
Yeah it is strange. Working on it. I will let you know if I figure it out.
Richard LeeSoftware Enthusiast
CERTIFIED EXPERT

Author

Commented:
Thanks. I tried for quite a while and could not work it out. I also used this as a guide, which does the trick but a nightmare changing the buttons over.

http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/
Top Expert 2011

Commented:
I was able to get it right in firefox, but the same styling won't work in IE.

It is definitely a padding issue.
Top Expert 2011

Commented:
Did you see this on that page?


button::-moz-focus-inner {
	border: none;  /* overrides extra padding in Firefox */
}

Open in new window

Top Expert 2011

Commented:
Got it.

change  line 1006

currently it says:

button {

Open in new window


change it to
button:::-moz-focus-inner {

Open in new window


that should do it.
Top Expert 2011
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Richard LeeSoftware Enthusiast
CERTIFIED EXPERT

Author

Commented:
Great job! I really do appreciate this help. I had to modify slightly as the above interferes with IE for some unknown reason. See changes.
button
{
	margin: 0;
	padding: 0;
	border: none;
}

button::-moz-focus-inner
{
	margin: 0;
	padding: 0;
	border: none;
}

Open in new window

Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.