I have a problem with HTML/CSS rendering.
How is it possible that this code:
<div class="gal-preview">
<div class="thumbnail">
<a href="#" class="link-thumbnail">
<img src="img/submissions/01/over_the_hedge.jpg">
<div class="info">
<div class="title">The hedge must be jumped!</div>
<a>AAAA</a>
</div>
</a>
</div>
</div>
I render this:
It is to enter the AAAA link that I have as a test, and everything is out of balance in an abnormal way.
The CSS is as follows:
.gal {
padding: 5px;
.gal-preview {
width: 20%;
height: 15vw;
float: left;
padding: 5px;
.thumbnail {
position: relative;
height: 100%;
background-color: #6a6a6a;
a.link-thumbnail {
.position(absolute, 0, 0, 0, 0);
display: block;
text-decoration: none;
img {
max-width: 100%;
max-height: 100%;
.position(absolute, 50%, initial, initial, 50%);
transform: translate(-50%, -50%);
}
.info {
padding: 10px;
.position(absolute, 0, 0, 0, 0);
.title {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
color: #f0f0f0;
}
.author {
.position(absolute, initial, 10px, 10px, 10px);
}
}
}
}
}
&::after {
.afterClear;
}
}
.position(@position, @top: initial, @right: initial, @bottom: initial, @left: initial) {
position: @position;
top: @top;
right: @right;
bottom: @bottom;
left: @left;
}
.afterClear {
content: '';
display: block;
clear: both;
}
I add JSFIDDLE with only the first test cell with this code: https://jsfiddle.net/vo3d6zk9/
The objective of having one a
inside the other is that if I click on the entire cell, except for AAAA
what would be another link, it will take me to the detail of that image. I have no problem placing the link AAAA
outside, but it has stunned me and I want to know basically why it renders this way.
One
a
inside another is invalid in html and there is no formal description of how to handle that case, so each engine does it in its own way and the result is relatively unpredictable.By the way, if it were the case that the DOM is structured as you propose, when clicking on the
a
inside, the event would propagate through the tree and would also generate a click on thea
outside.The best way to do what you want is to replace the
a
one inside with another element, and detect the direct click with JavaScript, stop the propagation withevent.stopPropagation()
, and then execute the desired action.