only safari gives me this problem

[r_tist]

Hi,

Each div is a container, and then with a div row, and then the div class containing content blocks.

3 sets of content blocks like this, and then the <footer>

It is only Safari that renders the last div container so that its content is overlapping the previous div container block. Really weird!

My guess is a clear-fix of some sort needed?

<div class="container"><div class="row"><div class="col-md-12 left">

     <iframe class="tscplayer_inline" id="embeddedSmartPlayerInstance" src="../movies/movie_player.html?embedIFrameId=embeddedSmartPlayerInstance" scrolling="no" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

</div></div></div>

<div class="visible-lg">

        <div class="pictureContainer">

                     <div class="imgOnSide"></div>

        </div>

</div>          

        <div class="container"><div class="row"><div class="col-md-7 col-sm-12">  ***This is the basic div that is overlapping the player in the div above by about 100px from bottom edge of the player - basically masking the controls within the media player***

    <h4><a href="#" target="_blank">Visit This Link</a></h4>

                <p>Line of txt here.<br>

                     Another line of text.<br>

                     Final closing sentence.</p>

        </div></div></div>

[r_tist]

Pinpointed the issue - I commented out this and tested, and no more distorted view. But how do I fix?

<div class="visible-lg">

        <div class="pictureContainer">

                     <div class="imgOnSide"></div>

        </div>

</div>

What do I need to modify in the CSS...both classes have a z-index of -5 and the container is 'relative' and the image is 'absolute'.

Must be something incorrect with those properties.  - Again, only in Safari, all other browsers and devices are good.  

[Nancy OShea]

Use the Bootstrap clearfix class to clear floats above your footer.

<div class="clearfix"></div>

<footer>

</footer>

[r_tist]

Tried inserting that without resolve. But there are no floats in here:

.pictureContainer {

    width:100%;

    margin-top: -8%;

    margin-left: 3%;

    position: relative;

    z-index: -5;

}

    .imgOnSide {      

    background: url('../img/picture.png') no-repeat;

    width:273px;

    height:218px;

    position: absolute;

    z-index: -5;

}​​​​​​​​​

[Nancy OShea]

Oh.  Well then you've created your own Frankenstien with that absolutely positioned element.

Nancy

[r_tist · Accepted solution]

Absolute Positioning Inside Relative Positioning | CSS-Tricks

This article helped with the correct fix.