CSS margin for Firefox

Question

i have written a CSS margin for spacing between checkboxes. It works fine on chrome but not on Firefox.

here is CSS

.vehicle-types {
  float:left;
  width:100%;
  margin: 6px 0;
  .check-vehicle {
    float:left;
    width:100%;
    .checkbox-btn {
      width: auto;
      display: inline-block;
      margin-right: 20px;
      float:left;
      input {
        float:left;
        width:0 !important;
      }
      label {
        margin:0 !important;
        float:left;
      }
    }
  }
}

is there any Firefox browser specific CSS? (screenshots below) Thanks in advance.

Chrome

Firefox

Mozilla

Show us two screenshots one in Chrome and one in Firefox and tell us what's wrong. Until then it looks like a margin issue with firefox and it's a duplicate. Don't use `!important`. It's a bad practise. — Praveen Kumar Purushothaman, Feb 01 '19 at 11:16
wrap checkboxes in the div and use flexbox + `justify-content`. do not use `!important` — vlad, Feb 01 '19 at 11:16
Having see the screenshots, flexbox looks like the ideal solution. — Quentin, Feb 01 '19 at 11:23
@PraveenKumarPurushothaman okay, i'm reviewing my code. i'll update once i am done — Shashi Dharan Krish, Feb 01 '19 at 11:28
@ShashiDharanKrish Is it just width doing a thing? Do you have any sidebars? — Praveen Kumar Purushothaman, Feb 01 '19 at 11:29
@PraveenKumarPurushothaman it's working fine on firefox when I set the margin as -5px but not on chrome. if i set it as 0 then it's fine on chrome and not in Firefox. — Shashi Dharan Krish, Feb 01 '19 at 11:32
@PraveenKumarPurushothaman I don't understand how the duplicate is relevant .. there is no relation between both — Temani Afif, Feb 01 '19 at 11:43
not enough as code .. CSS is useless alone, we need a complete code (HTML+CSS) so we can run it and see the output — Temani Afif, Feb 01 '19 at 11:51
What does the inspector tell you about the actual margins/spaces? — TheNewCivilian, Feb 01 '19 at 11:53
@PraveenKumarPurushothaman I saw it and it's still not relevant. He's asking why the code is not working not how to target a particular browser — Temani Afif, Feb 01 '19 at 12:28

score 1 · Accepted Answer · answered Feb 01 '19 at 12:03

Okay, So I was writing this answer before you pushed your edited post. I am still to go through the code but as an alternate you can try this and see if it works or not

update: You have only shared css which is still very difficult to comprehend

An ideal solution to have everything on the same line would be to do.

.parent-div {
display: flex; 
flex-direction: row;
justify-content: space-between
}

.child-div {
align-items: center;
display: flex;
flex-direction: row;
}

.create-box {
height: 30px;
width: 30px;
border: 1px solid black;
}

p {
margin-left: 5px;
}

<div class="parent-div"> 
  <div class="child-div">
   <span class="create-box"> </span>
   <p> checkBox 1 </p>
  </div> 
   <div class="child-div">
   <span class="create-box"> </span>
   <p> checkBox 1 </p>
  </div> 
   <div class="child-div">
   <span class="create-box"> </span>
   <p> checkBox 1 </p>
  </div> 
</div>

In the above code I have used flex

flex-direction says that wether you want your divs to be stacked in row or columns i.e consider this somewhat equivalent to bootstrap class row . (if you have used bootstrap previously)

justify-content: space-between: space-between gives equal space between each square, but not between it and the container.

Note: You could have also used space-around

Space-around puts an equal cushion of space on either side of the square — which means the space between the outermost squares and the container is half as much as the space between two squares (each square contributing a non-overlapping equal amount of margin, thus doubling the space).

align-items: center; just align everything inside a div to centre across x-y axis

I found this article very useful when learning about flexboxes (might help you as well)

I tried your answer on my code. It just works as charm. You saved my day. Thanks a Ton. — Shashi Dharan Krish, Feb 01 '19 at 12:12
If this helps you/solves your problem. Upvote/Mark this answered. Glad to help you. — Alwaysblue, Feb 01 '19 at 12:14
upvoted the answer, its not showing up as my reputation is below 15. — Shashi Dharan Krish, Feb 01 '19 at 12:15
Mark this answered in that case (Can you see that tick icon?) — Alwaysblue, Feb 01 '19 at 12:16

score 1 · Answer 2 · answered Feb 02 '19 at 19:34

1

Look, the Firefox version adds that margin to the first child as well..

To avoid that, use:

.checkbox-btn:not(:first-child) {
  ...
  margin-right: 20px;
  ...
}

answered Feb 02 '19 at 19:34

MCFreddie777

1,069
1
12
21

score 0 · Answer 3 · answered Feb 01 '19 at 14:33

I had this kind of problem also but with IE, for the next time you can use this code it will only show on firefox, you can edit what you want and it will only show on firefox

@-moz-document url-prefix() {
  //just write the code here
     }

I know its not a problem from your code but if that was the case you could go to: https://caniuse.com/

and check if it is your code

CSS margin for Firefox

3 Answers3