Solved

Button span adding extra padding in FF

Posted on 2013-11-01
6
239 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
Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 

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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
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…

773 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