Can someone help me with a positioning problem I'm having? I have a span element below an image inside an li tag, but for some reason the styles are not being applied. You can check out the example in the link below:
https://jsfiddle.net/ymm8xpb8/16/
The issue I'm facing (excluding the jsfiddle) is that in Firefox, the span tags overlap the image on top, while in Chrome and Safari they appear directly under the image. Here's the markup from the jsfiddle:
<ul class="title-preview">
<li>
<a href="#">
<img src="https://picsum.photos/100/100" alt="">
<span>Some tile text below the image</span>
</a>
</li>
<li>
<a href="#">
<img src="https://picsum.photos/100/100" alt="">
<span>Some tile text below the image</span>
</a>
</li>
<li>
<a href="#">
<img src="https://picsum.photos/100/100" alt="">
<span>Some tile text below the image</span>
</a>
</li>
</ul>
SCSS:
.title-preview {
list-style: none;
padding: 20px 0;
li {
display: inline-block;
padding-right: 1rem;
margin-bottom: 2rem;
padding-bottom: 2rem;
padding-top: .5rem;
a {
position: relative;
}
img {
padding-bottom: 10px;
}
span {
position: absolute;
left: 0;
text-transform: uppercase;
font-size: 14px;
font-family: ralewayBold, sans-serif;
width: 100px;
color: $sn-primary-link;
}
}
}
- Why are the styles not getting applied in the jsfiddle?
- How can I ensure consistent positioning of the
<span>tag underneath the image across different browsers?