Margin not working only in Safari (element is at the bottom of the page)

Question

Please check the following link in the latest safari: http://www.grupoguion.com/

The footer is fixed at the bottom and supossed to revealed with the scrolling, so the previous section has a margin-bottom but it doesn't work, only in Safari. Everywhere else is ok, even in IE I tried to add overflow: auto in the page-wrapper, but everything gets weird in all browsers with elements dissapear and appear. I also have read that removing height: 100% in the body and html may fix that, but that is not an option for me, because i need the images to fix the browser height.

Does anybody have another possible solution please?

Thank in advance.

Answer 1

You can add a div with the size of your bottom and make it transparent. html:

<div id='tr-footer'>
</div>

css :

#tr-footer{
height: ?px;
width:100%;
background:transparent;
}

Answer 2

The accepted answer is way too complicated. Consider this approach ( taken from another thread ):

It's a normal weird behaviour calling margin collapse. To simply avoid it add overflow: auto; on the [footer] container.

Your footer container could look something like this:

.footer-container {
    overflow: auto;
}

Answer 3

Try making the element

display:inline-block 

and Safari should respect its dimensions and margin.