I've been facing a puzzling issue for the past day. I am working on creating a website that resembles Windows 8, where each box represents a list item. The code is more complex than what I have shared here, but the problem seems to be isolated...
<ul>
<li>
<a href="#" class="box">
<ul>
<li>Logos</li>
<li>Book covers</li>
<li>Magazines</li>
<li>Wedding invitations</li>
</ul>
<img src="image.jpg">
</a>
</li>
</ul>
CSS:
.box {
display: block;
width: 600px;
height: 300px;
position: relative;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
Currently, everything works as intended and the image stays contained within the .box with overflow set to hidden. However, when I add an anchor tag after the child ul list items...
<ul>
<li>
<a href="#" class="box">
<ul>
<li><a href="#">Logos</a></li>
<li>Book covers</li>
<li>Magazines</li>
<li>Wedding invitations</li>
</ul>
<img src="graphic.jpg">
</a>
</li>
</ul>
The overflow issue arises, and the image occupies all available space, extending beyond the boundaries of .box. Why does this happen? And how can I resolve it?