Having an issue with two of my divs not appearing in Safari, while they show up perfectly fine on Chrome and Firefox. The buttons labeled as .phquote and .designquote are not displaying on the initial page load. More details can be found by inspecting my website at
I've already checked for any image-related problems but that doesn't seem to be the cause. Even after removing the images and simply adding a background color to the div, the issue persists.
If anyone could assist me in resolving this matter, I would greatly appreciate it.
Below is the code snippet:
HTML
<main>
<div id="homebanner">
<div class="bannerbuttons">
<a href="photography.html" class="phquote"></a>
<a href="myfavorites.html" class="designquote"></a>
<a href="contact.php" class="contactbtn"></a>
</div>
</div>
</main>CSS
#homebanner {
background-image: url("Images2/home.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 500px;
margin-top: -33px;
}
.contactbtn {
display: none;
}
.bannerbuttons {
width: 55%;
margin: 0 auto;
}
.phquote {
float: left;
width: 50%;
height: 45%;
margin-top: 40px;
background-repeat: no-repeat;
background-image: url("/Images2/ph-quote-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
.phquote:hover {
background-repeat: no-repeat;
background-image: url("Images2/ph-quote-hover-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
.designquote {
float: left;
width: 50%;
height: 45%;
margin-top: 190px;
background-repeat: no-repeat;
background-image: url("Images2/design-quote-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}
.designquote:hover {
background-repeat: no-repeat;
background-image: url("Images2/design-quote-hover-400.png");
-o-background-size: contain;
-moz-background-size: contain;
-webkit-background-size: contain;
}