Solved

Button span adding extra padding in FF

Posted on 2013-11-01
6
236 Views
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(
 linear,
 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
0
Comment
Question by:UName10
  • 3
  • 2
6 Comments
 
LVL 22

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.
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39616965
Add:

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


(this is a FF specific issue)
0
 

Author Comment

by:UName10
ID: 39633061
Cheers - I'll check it out and report back...
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:UName10
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
0
 
LVL 58

Expert Comment

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

Author Closing Comment

by:UName10
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.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Having a little issue with EDGE/IE CSS display of after 2 30
Full Screen problem when auto scale IFRAME 2 65
FIELDSETs and LEGENDs in email markup 1 13
Centered Image 2 23
This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

920 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

17 Experts available now in Live!

Get 1:1 Help Now