0

I'm trying to give my links a nice effect by having it appear as if the upper left corner has been bite off, I do this by absolutely positioning a square element with the same background color as the link itself.

This works in Chrome but for some reason in Firefox the square element will stay inside the link element no matter what, how can I fix this?

My code:

<section style="width:100%; height:auto; display:flex; justify-content:space-between; padding:0px 75px; outline:1px solid red;">
    <div style="width:48%; height:auto; display:flex; flex-direction:column; outline:1px solid red;">
        <div style="width:100%; height:300px; outline:1px solid red; margin-bottom:50px; position:relative; align-self:center;">
      <div style="width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:red; background-image:url(''); background-size:cover;"></div>
      
  </div>
  <a href="" style="font-size:22px; padding:10px 20px; outline:1px solid red; align-self:center; overflow:visible; margin-bottom:25px; position:relative;">VER NUESTRA CARTA<span style="width:27px; height:27px; position:absolute; top:-5px; left:-5px; background-color:white; outline:1px solid red;"></span></a>
  <span style="font-size:15px; color:rgba(0,0,0,0.7); font-weight:500; align-self:center; text-align:center; margin-bottom:25px;">Consulta nuestra variada carta con unos platos exquisitos y de calidad.</span>
 </div>
    <div style="width:48%; height:auto; display:flex; flex-direction:column; outline:1px solid red;">
        <div style="width:100%; height:300px; outline:1px solid red; margin-bottom:50px; position:relative; align-self:center;">
      <div style="width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:red; background-image:url(''); background-size:cover;"></div>
      
  </div>
  <a href="" style="font-size:22px; padding:10px 20px; outline:1px solid red; align-self:center; margin-bottom:25px; position:relative;">HACER RESERVA<span style="width:27px; height:27px; position:absolute; top:-9px; left:-9px; background-color:white; outline:1px solid red;"></span></a>
  <span style="font-size:15px; color:rgba(0,0,0,0.7); font-weight:500; align-self:center; text-align:center; margin-bottom:25px;">Contamos con una amplia terraza para poder degustar nuestra comida japonesa.</span>
 </div>
</section>
  • just change every pixels to percentage – Adesh Kumar Jul 04 '18 at 12:24
  • possible duplicate: https://stackoverflow.com/questions/10662902/css-outline-different-behavior-behavior-on-webkit-gecko. Firefox claims to have fixed this bug (https://bugzilla.mozilla.org/show_bug.cgi?id=687311), but probably not completely – Ilya Streltsyn Jul 04 '18 at 13:06
  • as a workaround, you can replace the link `outline` with either `border` or `box-shadow` to create a visible border that is not affected by positioned child. – Ilya Streltsyn Jul 04 '18 at 13:08

2 Answers2

0

if you set display: table; on the parent element, it should work in firefox

Matthias Schmidt
  • 585
  • 1
  • 7
  • 25
0

It works if you will give the a and span a display:block. 

<section style="width:100%; height:auto; display:flex; justify-content:space-between; padding:0px 75px; outline:1px solid red;">
    <div style="width:48%; height:auto; display:flex; flex-direction:column; outline:1px solid red;">
        <div style="width:100%; height:300px; outline:1px solid red; margin-bottom:50px; position:relative; align-self:center;">
      <div style="width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:red; background-image:url(''); background-size:cover;"></div>
      
  </div>
  <a href="" style="font-size:22px; padding:10px 20px; background:green; display:block; align-self:center; overflow:visible; margin-bottom:25px; position:relative;">VER NUESTRA CARTA<span style="width:27px; height:27px; position:absolute; top:-5px; left:-5px; background-color:white; background:red; display:block;"></span></a>
  <span style="font-size:15px; color:rgba(0,0,0,0.7); font-weight:500; align-self:center; text-align:center; margin-bottom:25px;">Consulta nuestra variada carta con unos platos exquisitos y de calidad.</span>
 </div>
    <div style="width:48%; height:auto; display:flex; flex-direction:column; outline:1px solid red;">
        <div style="width:100%; height:300px; outline:1px solid red; margin-bottom:50px; position:relative; align-self:center;">
      <div style="width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:red; background-image:url(''); background-size:cover;"></div>
      
  </div>
  <a href="" style="font-size:22px; padding:10px 20px; background:green; display:block; align-self:center; overflow:visible; margin-bottom:25px; position:relative;">VER NUESTRA CARTA<span style="width:27px; height:27px; position:absolute; top:-5px; left:-5px; background-color:white; background:red; display:block;"></span></a>
  <span style="font-size:15px; color:rgba(0,0,0,0.7); font-weight:500; align-self:center; text-align:center; margin-bottom:25px;">Consulta nuestra variada carta con unos platos exquisitos y de calidad.</span>
 </div>
</section>
Mesign
  • 81
  • 8