I am currently working on developing a responsive design with the feature of having a button that appears to "float" under a div element.
My desired outcome is achieved in Opera and Chrome:
In Firefox, the result is not as expected:
You can access my complete code here: https://jsfiddle.net/fej93gg5/
How can I resolve this issue?
Edit: After discovering a bug report for Firefox here, it seems like this bug has been around for a long time and may not be fixed any time soon. Hence, I am now searching for a workaround.
<div class="blockcontainer-2col with-outline vertical-center ">
<div class="blockcontainer-content">
<h2 class="titlecontent-2col">Some title</h2>
<div class="textcontent">
<ul class="bulletlist">
<li>Blah blah</li>
<li>Blub blub</li>
<li>Whoopdi doopdi hokus pokus kdkjeljer</li>i>
</ul>
<!-- This button is not supposed to resize the outline -->
<div style="display: float; font-size: 1.7em; text-align: center; font-weight: bold;">
<a class="flatblockbutton" href="http://bluedomainer.com/portfolio/">Check out portfolio</a>
</div>
</div>
</div>
</div>
This is the full css:
/* reset all margins and borders to zero */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
margin:0;
padding:0;
border:0;
font:inherit;
vertical-align:baseline
}
...
... (Remaining content unchanged for brevity)
...
.flatblockbutton:hover, .flatblockbutton:focus {
background: rgba(16, 145, 202, 1);
text-shadow: -1px 1px 10px #ffc, 1px -1px 8px #ffffff;
box-shadow: 5px 7px 12px 10px rgba(0,0,0,0.14);
top: 1.5rem;
left: -0.5rem
}