Currently, I am working on a simple header design, but there seems to be a strange issue with the anchors containing image tags. The problem can be seen in the screenshot below:
Image Link
Here is the HTML structure:
<div class="block-content">
<form method="get" id="header-searchform" class="search-form search-button-hidden" action="http://klarparatsy.stof2000.dk/" _lpchecked="1">
<div>
<input id="search" class="field" type="text" name="s" value="" placeholder="Enter keyword">
</div>
</form>
<a id="stof2000-logo" href="http://klarparatsy.stof2000.dk/">
<img src="http://klarparatsy.stof2000.dk/wp-content/uploads/2014/09/stof2000logo.png" alt="Stof 2000">
</a>
<a id="klarparatsy-logo" href="http://klarparatsy.stof2000.dk/">
<img src="http://klarparatsy.stof2000.dk/wp-content/uploads/2014/09/klarparatsy-logo.png" alt="Stof 2000">
</a>
<img id="homemade-logo" src="http://klarparatsy.stof2000.dk/wp-content/uploads/2014/09/homemade-logo.png" alt="Stof 2000">
</div>
And here is the CSS styling:
#stof2000-logo {
position: relative;
top: 39px;
left: 80px;
}
#klarparatsy-logo {
position: relative;
top: 41px;
left: 143px;
}
The artefacts appear near the boundaries of the images, and despite checking the code thoroughly, I cannot identify the cause of this issue. Any advice or suggestions would be greatly appreciated as this seemingly small problem has become quite frustrating.