UName10
asked on
Button span adding extra padding in FF
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:
Any ideas appreciated
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;
}
Any ideas appreciated
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Cheers - I'll check it out and report back...
ASKER
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
Accepted answer: 0 points for UName10's comment #a39633061
for the following reason:
Not an abandoned question
Why are you accepting your own comment as an answer?
ASKER
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.
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.