Inspiring

Answered

only safari gives me this problem

5 replies
4816 views
Translate

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>

This topic is closed to new replies. Start a new post to keep the conversation going.

r_tistCorrect answer

Inspiring

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

Nancy

Absolute Positioning Inside Relative Positioning | CSS-Tricks

This article helped with the correct fix.

r_tistAuthor

Inspiring

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.

Translate

Community Expert

Community Expert

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

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

<footer>

</footer>

Translate

Nancy O'Shea— Product User & Community Expert

r_tistAuthor

Inspiring

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;

}

Translate