CODEWITHSUNDEEP
htmlcsssass
Shashi Dharan Krish
Shashi Dharan Krish

Reputation: 29

CSS margin for Firefox

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

Chrome

Firefox

Mozilla

Upvotes: 0

Views: 371

Answers (3)

MCFreddie777
MCFreddie777

Reputation: 1223

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;
  ...
}

Upvotes: 1

Bram
Bram

Reputation: 31

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

Upvotes: 0

Alwaysblue
Alwaysblue

Reputation: 11840

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)

Upvotes: 1

Related Questions