Firefox and Edge do not apply margin to the element

Asked

Viewed 31 times

2

I have tested in Chromium browsers and operates, it worked, but in firefox and edge has this problem

Use the Materializecss

I have an element <main> which contains the main content of the website divided into <article> and an element <footer> which contains some links and an image. The footer is fixed and is below the main content that has a lower margin for the radapé to appear at the end

The short code:

main {
    margin-bottom: 450px !important;
    position: absolute;
    width: auto;
    min-height: 100vh !important;
    right: 0 !important;
    left: 0;
    z-index: 2;
    overflow: hidden;
    background: #fafafa;
    color: #000000;
    margin-left: 300px;
}

footer {
    background-color: #263238 !important;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: auto;
    margin-bottom: 0 !important;
    padding-bottom: 0px;
    padding-top: 450px !important;
    padding-left: 300px;
    z-index: 1;
    overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Main content -->
<main>
  <p> Conteúdo Principal </p>
</main>

<!-- Contact links -->
<footer class="page-footer row">
  <p> Links </p>
</footer>

Only in Firefox and Edge the lower margin is not applied to the main element, so the header does not appear when scrolling the page to the end, it is always covered. The question code does not even show the scroll bar

In all browsers, when inspecting the element, the margin appears in the main content, that is, it is not being overwritten by some other CSS

html css firefox layout microsoft-edge

1 answer

2


Is because of the position:absolute in the <main>. Tire absolute and put relative and it’s gonna work on both FF and Edge!

Result in the FF

inserir a descrição da imagem aqui

Result in EDGE

inserir a descrição da imagem aqui

main {
  margin-bottom: 450px !important;
  position: relative;
  width: auto;
  min-height: 100vh !important;
  right: 0 !important;
  left: 0;
  z-index: 2;
  overflow: hidden;
  background: #fafafa;
  color: #000000;
  margin-left: 300px;
}

footer {
  background-color: #263238 !important;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: auto;
  margin-bottom: 0 !important;
  padding-bottom: 0px;
  padding-top: 450px !important;
  padding-left: 300px;
  z-index: 1;
  overflow: hidden;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<!-- Main content -->
<main>
<p> Conteúdo Principal </p>
</main>

<!-- Contact links -->
<footer class="page-footer row">
<p> Links </p>
</footer>

  • It had to be something very simple. But it’s strange that browsers interpret this property differently. Thanks for the help

  • @Costamilam eh that with Absolute the scope of the element changes even, tbm I find strange this behavior. With so little code it was easy to find out where the rss problem was. Apparently switching to relative solved and had no side effects, but test at different resolutions when you can. Congratulations the site It’s getting cool

Browser other questions tagged html css firefox layout microsoft-edge

You are not signed in. Login or sign up in order to post.