Firefox Specific Margin

Firefox specific margin?

Your problem probably lies elsewhere, but here's how you target Firefox only:

@-moz-document url-prefix() {
    a {
        margin: 0;
    }
}

How to do margin-top only in Firefox browser

Here ya go buddy, sorry I left for the day yesterday but see the changes made and I left outlines on the elements to give a better visual reference. As it is now it will display as expected on all browsers even old internet explorer. Although you could accomplish the same thing cleaner overall, this at least gets you back on track. Cheers and welcome to StackOverflow! :)

PS : since the nav menu items don't have a fixed height you might want to consider making that something static so you can change the top: 56px to a value that places the drop down consistently no matter the width of the screen. If you make the example full screen you'll see what I mean.

header {
  display: flex;
  margin: 0;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  background-color: silver;
}
.header {
  grid-area: header;
  background-color: #1f1f1f;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
/*---------- Logo ----------*/
.logo {
  font-family: 'Gentium Book Basic', serif;
  font-size: 2.5em;
  color: #808080;
}

/*---------- Nav menu ----------*/
.nav {
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  margin: 0;
}
  .nav > li {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    color: #ffffff;
    transition: background-color .25s ease;
  }
  .nav a {
    display: block;
    padding: 20px;
    color: #ffffff;
    font-size: 1em;
  }
  .category {
    padding: 0 20px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: visible;
    border: red 1px solid;
  }

  /*---------- Sub menu ----------*/

  .nav li ul {
    position: absolute;
    top: 56px;
    left: 0;
    min-width: 150px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: none;
    border: green 1px solid;
  }
  .nav li > ul li {
    border-bottom: 1px solid #ffffff;
    background-color: #1f1f1f;
  }
  .nav li > ul li a {
    text-transform: none;
  }
  .nav li:hover > ul {
    display: block;
  }
  .nav > li:hover {
    background-color: #404040;
/*         box-shadow: -5px 5px #1f1f1f; */
  }
  .nav li ul > li:hover {
    background-color: #404040;
  }

/*---------- Search & Profile----------*/
.search_and_profile {
  display: flex;
  align-items: center;
}
.search_and_profile > p {
  margin: 0;
  color: #ffffff;
}
.search-container button {
  float: right;
  padding: 6px 10px;
  background: #e0e0e0;
  font-size: 17px;
  border: none;
  cursor: pointer;
}
.search-container input[type=text] {
  padding: 6px;
  font-size: 17px;
  border: none;
}

<header class="header">
      <a href="index.php"><span class="logo">Qwerty</span></a>
  <nav>
    <ul class="nav">
      <li class="category"><span>Category <i class="fas fa-sort-down"></i></span>
        <ul>
          <li><a href=#>Qwerty 1</a></li>
          <li><a href="#">Qwerty 2</a></li>
          <li><a href="#">Qwerty 3</a></li>
          <li><a href="#">Qwerty 4</a></li>
        </ul>
      </li>
      <li><a href="">Cuntact us</a></li>
      <li><a href="">FAQ</a></li>
    </ul>
  </nav><!-- .nav -->
  <div class="search_and_profile">
    <div class="search-container">
      <form action="#">
        <input type="text" placeholder="Search.." name="search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div><!-- .search-container -->
  </div><!-- .search_and_profile -->
</header>

CSS margin for Firefox

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>

   

margin-top on firefox and chrome

If you add vertical-align: top; to your hello class the example looks the same on all browsers.

.hello {
    display: inline-table;
    vertical-align: top;
}

margin-top/bottom % not works in firefox

Please try this code.

It's due to display:flex is not working well with % in Firefox. So here you need to used display:block to container1 div.

Use this code when you are using % in margin-bottom.

<div class="container1" style="display: block; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 1%; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

Please try this code when you are using PX not % in margin-bottom.

<div class="container1" style="display: flex; flex-direction: column;">
   <div class="div1" style="height: 100px; margin-bottom: 10px; background-color: green;"> This is div 1 </div>
   <div class="div2" style="height: 100px; background-color: blue"> This is div 2 </div>
</div>

Browser specific CSS padding for firefox field

Note: the first part of this answer is now obsolete, as this feature has been removed from Firefox. For the real answer, read on from "However".

---

The answer to your question is: yes, it's possible to put Mozilla-specific CSS in a stylesheet. (Not in an inline style attribute.)

In this case, you would write

@-moz-document url-prefix() {
    select {padding-top:10px;}
}

which is simply the Mozilla-prefixed version of the @document rule, that is not recognised by other browsers.

---

However, the actual solution to the problem of the mismatched text position is to not set the height, but only the padding of the select. No hacks.

style="font-size: 14px; padding: 11px 0 11px 5px;"

That has the desired effect in all browsers. See new fiddle.

margin issue in FireFox

Try giving the header a height:

header {
  height: 100px;
}

(setting the overflow to hidden works too)

header {
  overflow: hidden;
}

margin-left and width properties not working in mozilla firefox

There are display:inline-box; not supported in Mozilla.

So, you can done this type of code:

.maincontainer{
    display:inline-block;
}
.event_image{
    display:inline-block;
    vertical-align: top;
}
.event_content{
    display:inline-block;
    vertical-align: top;
}
.plus{
    display:inline-block;
    vertical-align: top;
}

---

Related Topics