Improve company productivity with a Business Account.Sign Up

x
?
Solved

Button span adding extra padding in FF

Posted on 2013-11-01
6
Medium Priority
?
259 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 2000 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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 

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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

587 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