Menu icon Foundation
Overlap divs in Safari

Hi all, 

I'm having trouble getting a perfect alignment in Safari. In Chrome, the website displays correction, like so:

chrome

 

But in Safari, the 'Welcoming Note' is rendered under the earlier div, like so:

safari

 

Here's the code block for this:

<div class="row hz-cards-bg clearfix">
		<div class="large-3 large-offset-3 medium-12 small-12 small-centered columns">
			<div class="large-12 columns">
				<a href="summer-camp.html" class="hz-normal-text">
				<div class="row hz-cards-sum hvr-float-shadow">
				<img src="<?php echo get_template_directory_uri(); ?>/assets/images/p1.jpg" style="min-width: 240px; display: block; margin: 0px auto;">
				<div class="large-12 columns text-center">
					<h4 class="hz-query hz-bold">Summer<br/>Camp</h4>
					<p class="hz-small-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
					<div class="row">
						<div class="large-8 large-offset-2 columns">
							<button class="button round small expanded hz-pink">Learn more</button>
						</div>
					</div>
				</div>
			</div></a>
			</div>
		</div>
		<div class="large-3 medium-12 small-12 columns end">
			<div class="large-12 columns">
				<a href="#" class="hz-normal-text">
				<div class="row hz-cards-ex hvr-float-shadow">
					<img src="<?php echo get_template_directory_uri(); ?>/assets/images/p1.jpg" style="min-width: 240px; display: block;" >
					<div class="large-12 columns text-center">
						<h4 class="hz-query hz-bold">Exchange<br/>Programmes</h4>
						<p class="hz-small-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
						<div class="row">
							<div class="large-8 large-offset-2 columns">
							<button class="button round small expanded hz-pink">Learn more</button>
							</div>
						</div>
					</div>
				</div></a>
			</div>
		</div>
		<div class="row" style="margin-top: 100px;">
			<div class="large-4 large-offset-4 medium-4 medium-offset-4 small-12 columns text-center">
				<p class="hz-small-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
				<hr/>
			</div>
		</div>
	</div>
</section>
<section class="welcoming-note">
	<div class="row">
		<div class="large-12 medium-12 small-12 columns">
			<h4 class="text-center hz-tajuk-section">Welcoming Note</h4>
		</div>
	</div>
	<div class="row small-centered">
		<div class="large-5 large-offset-2 medium-5 medium-offset-2 small-12 columns">
			<p>"It gives me great pleasure to welcome you to Malaysia and thank you for choosing UPSI.</p>
			<p>Here , you will learn alongside the current trends of education in research.   You will be able to assimilate in a most diverse, multi-cultural settings.  Be critical, ask questions and make your voice heard and have lots of fun.</p>
			<p>You will be given all the tools and opportunities needed to shape your own future. I encourage you to take advantages of the breath of our University and sign up courses, programs, events. I promise your experience here will be stimulating, exciting and rewarding as possible."</p>
			<br/>
			<h5>Dr. Jane Teng Yan Feng,</h5>
			<h6>Mobility Unit Coordinator</h6>
		</div>

 

Anyone has any idea what might causing this?

 

 

 

overlapdivsSafari

Hi all, 

I'm having trouble getting a perfect alignment in Safari. In Chrome, the website displays correction, like so:

chrome

 

But in Safari, the 'Welcoming Note' is rendered under the earlier div, like so:

safari

 

Here's the code block for this:

<div class="row hz-cards-bg clearfix">
		<div class="large-3 large-offset-3 medium-12 small-12 small-centered columns">
			<div class="large-12 columns">
				<a href="summer-camp.html" class="hz-normal-text">
				<div class="row hz-cards-sum hvr-float-shadow">
				<img src="<?php echo get_template_directory_uri(); ?>/assets/images/p1.jpg" style="min-width: 240px; display: block; margin: 0px auto;">
				<div class="large-12 columns text-center">
					<h4 class="hz-query hz-bold">Summer<br/>Camp</h4>
					<p class="hz-small-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
					<div class="row">
						<div class="large-8 large-offset-2 columns">
							<button class="button round small expanded hz-pink">Learn more</button>
						</div>
					</div>
				</div>
			</div></a>
			</div>
		</div>
		<div class="large-3 medium-12 small-12 columns end">
			<div class="large-12 columns">
				<a href="#" class="hz-normal-text">
				<div class="row hz-cards-ex hvr-float-shadow">
					<img src="<?php echo get_template_directory_uri(); ?>/assets/images/p1.jpg" style="min-width: 240px; display: block;" >
					<div class="large-12 columns text-center">
						<h4 class="hz-query hz-bold">Exchange<br/>Programmes</h4>
						<p class="hz-small-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
						<div class="row">
							<div class="large-8 large-offset-2 columns">
							<button class="button round small expanded hz-pink">Learn more</button>
							</div>
						</div>
					</div>
				</div></a>
			</div>
		</div>
		<div class="row" style="margin-top: 100px;">
			<div class="large-4 large-offset-4 medium-4 medium-offset-4 small-12 columns text-center">
				<p class="hz-small-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
				<hr/>
			</div>
		</div>
	</div>
</section>
<section class="welcoming-note">
	<div class="row">
		<div class="large-12 medium-12 small-12 columns">
			<h4 class="text-center hz-tajuk-section">Welcoming Note</h4>
		</div>
	</div>
	<div class="row small-centered">
		<div class="large-5 large-offset-2 medium-5 medium-offset-2 small-12 columns">
			<p>"It gives me great pleasure to welcome you to Malaysia and thank you for choosing UPSI.</p>
			<p>Here , you will learn alongside the current trends of education in research.   You will be able to assimilate in a most diverse, multi-cultural settings.  Be critical, ask questions and make your voice heard and have lots of fun.</p>
			<p>You will be given all the tools and opportunities needed to shape your own future. I encourage you to take advantages of the breath of our University and sign up courses, programs, events. I promise your experience here will be stimulating, exciting and rewarding as possible."</p>
			<br/>
			<h5>Dr. Jane Teng Yan Feng,</h5>
			<h6>Mobility Unit Coordinator</h6>
		</div>

 

Anyone has any idea what might causing this?

 

 

 

Val Ery over 2 years ago

Hi Hafiz!

Block with class "row hz-cards-bg" opens a <div> tag and closed by a tag </section>. Yeah?

P.S. I guess that somewhere an error in the tags (for example, not closed)...

Hafiz Hanif over 2 years ago

Hi Val Ery!

Thanks for the reply. There is a <section> before this codeblock above, but decided it's too long include all the codes.

As you can see in the screenshot below (taken from chrome's inspector), the tags are all closed.

codeblock

Val Ery over 2 years ago

Hi Hafiz!

The Inspector shows the "final" result. And the browser itself "can" complement/correct user code. Therefore it is better to look "Page Source" in browser.
I believe you (regarding code). But I want to suggest to validate the markup. In any case, it will not be worse :)

I have seen the problem of incorrect display of pages in Safari. But only in mobile Safari. For instance, mobile Safari does not accept parameter "height: 100vh;". Despite the fact that canIuse.com points to 100% support for this option.

One solution to your problem - try to add a block with a height of 1 pixel after "hero" section (and before "welcome").