In mozilla my button not look good as it shown in chrome

Question

I want to show my button in Mozilla like Chrome so please help me what will I do for it. This is my code.

CSS:

.green {
     background: linear-gradient(to bottom, #9CD645 0%, #8AC530 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
     border: 1px solid #82B436;
}

.large {
     font-size: 18px;
}
.btn {
     border: 1px solid #82B436;
     border-radius: 25px;
     box-shadow: 0 1px rgba(99, 159, 8, 0.35);
     color: #508400;
     display: inline-block;
     font-weight: bold;
     padding: 3px 12px;
     text-decoration: none;
     text-transform: uppercase;
}

.green {
     background-color: #8CC63F;
 }

.btn span {
     background: url("images/icon_arrows.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
     display: block;
     float: right;
     height: 18px;
     margin: 5px;
     width: 18px;
}

HTML:

<a href="smoodees" class="btn large green">
    Check out our Smoodees
    <span></span>
</a>

What's the exact problem you're having? They look the same to me in both browsers. — Igor, Feb 18 '14 at 04:57
in mozilla icon go to next line and button height is increase — user3278839, Feb 18 '14 at 04:59

RealDeepak · Accepted Answer · 2014-02-18T05:43:28.010

2

Checkout this fiddle:

http://jsfiddle.net/realdeepak/gvC9z/1/

or For browser compatibility in firefox, you can use css hack like this:

@-moz-document url-prefix() { 
  .large {
    font-size: 17px;
  }
}

Or Try this, And fix minor css padding alignment as per your screen:

<style type="text/css">
 .green {
     background: linear-gradient(to bottom, #9CD645 0%, #8AC530 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
     border: 1px solid #82B436;
}

.large {
     font-size: 18px;
}
.btn {
border: 1px solid #82B436;
border-radius: 25px;
box-shadow: 0 1px rgba(99, 159, 8, 0.35);
color: #508400;
display: inline-block;
font-weight: bold;
padding: 3px 30px 3px 10px;
text-decoration: none;
text-transform: uppercase;
position: relative;
}

.green {
     background-color: #8CC63F;
 }

.btn span {
     background: url("images/icon_arrows.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
     height: 18px;
     margin: 5px;
     width: 18px;
     position: absolute;
     top: 0;
     right: 0;
}

</style>

edited Feb 18 '14 at 05:43

answered Feb 18 '14 at 04:59

RealDeepak

823
6
9

i have a problem with icon in span it show ok in chrome but not in mozilla . icon goes to next line in mozilla – user3278839 Feb 18 '14 at 05:02
@user3278839, I have updated my answer. If possible use, position property for this scenario. – RealDeepak Feb 18 '14 at 05:10
@user3278839, Anything else! – RealDeepak Feb 18 '14 at 05:27
padding is not a problem its position mater of icon – user3278839 Feb 18 '14 at 05:32
check my fiddle link. Hope you looking for this. http://jsfiddle.net/realdeepak/gvC9z/1/ – RealDeepak Feb 18 '14 at 05:44

Vaibhav Gupta · Answer 2 · 2014-02-18T05:46:39.517

0

Changing the answer completely.

Try this structure:

<a href="smoodees" class="btn large green"> <p id="text">Check out our Smoodees</p> <span></span> </a>

and change the CSS like so:

#id{ float: left }

span{ float: left }

edit: For multiple buttons, change the ID to a Class

edited Feb 18 '14 at 05:46

answered Feb 18 '14 at 05:01

Vaibhav Gupta

25
7

i have problem with icon which is call on span as a background-image.. icon not align in firefox – user3278839 Feb 18 '14 at 05:08
https://dev.xcluesiv.com/linssmoodees/ check it on firefox this button icon not align as shown in chrome – user3278839 Feb 18 '14 at 05:10
size of icon 18px by 18 px – user3278839 Feb 18 '14 at 05:17
on main page slider button is create problem the icon is not align plz check – user3278839 Feb 18 '14 at 05:29
Try changing display:block to display:inline-block – Vaibhav Gupta Feb 18 '14 at 05:33

In mozilla my button not look good as it shown in chrome

2 Answers2