Button span adding extra padding in FF

Posted on 2013-11-01
Last Modified: 2013-12-03
On my page here in the right nav, the first button uses a button class and the second 'submit' uses an 'a'.

Not sure why, but in FF the first button for 'search' is adding extra padding around the span containing text.

If someone could check maybe in an inspector as it's easy to see?

Here's the CSS:

.button {
white-space: nowrap;
color: #ECECEC;
padding: 0;
position: relative;
outline: none;
overflow: visible;
cursor: pointer;
border: 1px solid #999;
border: rgba(0, 0, 0, 0.2) 1px solid;
border-bottom: rgba(0, 0, 0, 0.4) 1px solid;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
background: -moz-linear-gradient(
 center top,
 rgba(255, 255, 255, .1) 0%,
 rgba(0, 0, 0, .1) 100%
background: -webkit-gradient(
 center bottom,
 center top,
 from(rgba(0, 0, 0, 0.1)),
 to(rgba(255, 255, 255, 0.1))
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')";
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
user-select: none;
.button, .button span.text, .button span {
display: inline-block;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0;
text-align: center;

.button, .button span.text, .button span {
display: inline-block;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0;
text-align: center;
.button span {
position: relative;
color: #FFF;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
border-top: rgba(255, 255, 255, 0.2) 1px solid;
padding: 4px 0;
text-decoration: none;
text-align: center;
white-space: nowrap;
width: 100%;
line-height: 1.6 !important;
text-shadow: 0px -1px 0px #333;
font-family: ebrima bold;
text-transform: lowercase;
font-weight: bold;

Open in new window

Any ideas appreciated
Question by:UName10
  • 3
  • 2
LVL 21

Expert Comment

by:Kim Walker
ID: 39616480
Screen capture from Firefox 24.0I assume this is the button you're referring to. Is this NOT what you expect it to look like?

The text "GO" in the button is pushed outside the visible area of the button by a text-indent of 125% (hidetext class). Because the span is given a "block" display value (searchGlass class), overflow hidden (hidetext class), and a width of 15px (searchGlass class), the text is cut off from view.

I highly recommend to download the free firebug extension for Firefox so you can see this for yourself.
LVL 58

Accepted Solution

Gary earned 500 total points
ID: 39616965

button::-moz-focus-inner {
     border: 0

(this is a FF specific issue)

Author Comment

ID: 39633061
Cheers - I'll check it out and report back...
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.


Author Comment

ID: 39671523
I've requested that this question be closed as follows:

Accepted answer: 0 points for UName10's comment #a39633061

for the following reason:

Not an abandoned question
LVL 58

Expert Comment

ID: 39671524
Why are you accepting your own comment as an answer?

Author Closing Comment

ID: 39693245
Sorry Gary - I made a mistake before thinking this was a different question as I was clearing through some others and had different tabs open, and also requested assistance... Gary, you were right - many thanks, it saved me lots of hassle.

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Column Spacing 3 37
radio button value 3 45
Hovering effect 9 29
After moving to webstite page stopped working 7 52
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

758 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now