?
Solved

Button layout issue

Posted on 2011-04-21
9
Medium Priority
?
301 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?
0
Comment
Question by:Richard Lee
  • 6
  • 3
9 Comments
 
LVL 13

Expert Comment

by:jonahzona
ID: 35441138
Which buttons are you speaking of on your link? The nav buttons?
0
 
LVL 18

Author Comment

by:Richard Lee
ID: 35441177
I'm speaking about the submit button and the checkout button.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35441394
Yeah it is strange. Working on it. I will let you know if I figure it out.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 18

Author Comment

by:Richard Lee
ID: 35441492
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/
0
 
LVL 13

Expert Comment

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

It is definitely a padding issue.
0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35441532
Did you see this on that page?


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

Open in new window

0
 
LVL 13

Expert Comment

by:jonahzona
ID: 35441571
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.
0
 
LVL 13

Accepted Solution

by:
jonahzona earned 2000 total points
ID: 35441623
Actually, you  might want to change it to

button, button::-moz-focus-inner {

Open in new window


sorry about that last post.

0
 
LVL 18

Author Comment

by:Richard Lee
ID: 35441785
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

0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question