As a beginner in html, please pardon my silly questions and mistakes. I have designed this webpage:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<style type = text/css>
#topbar
{
position: absolute;
top: 0;
left: 0;
height: 80px;
width:100%;
background-color:black;
border-style: solid;
border-bottom-color: mediumaquamarine;
border-bottom-width: thin;
}
#login
{
position:fixed;
top: 20px;
left: 92%;
}
#latestItems
{
position: fixed;
height:90%;
width: 100%;
top: 100px;
background-color:white;
border: 2px;
border-color: black;
}
#tabs
{
position: fixed;
top: 30px;
left: 150px;
}
#tabs_search
{
position: relative;
}
#tabs_search:hover
{
}
#tabs_lists
{
position: relative;
left: 40px;
}
#tabs_cart
{
position: relative;
left: 80px;
}
#tabs_home
{
position: relative;
left: 120px;
}
#tabs_profile
{
position: relative;
left: 160px;
}
</style>
</head>
<body>
<header id = topbar>
<img id = logo src = "logo.png" width = 4% heigth = 4% href = "index.html"></img>
<a id = "login" href = "https://steamcommunity.com/login/home/?goto=0">
<img src="http://www.tf2wh.com/img/sits.png" width = 120 height = 50>
</a>
<div id = tabs>
<a href = "search.html", title = "browse items">
<img id = tabs_search src = "search.png" width = 2% height = 2% ></img>
</a>
<a href = "lists.html" title = "list items">
<img id = tabs_lists src = "lists.png" width = 2% height = 2% ></img>
</a>
<a href = "shopping_cart.html" title = "my cart">
<img id = tabs_cart src = "cart.png" width = 2% height = 2% ></img>
</a>
<a href = "index.html" title = "return home">
<img id = tabs_home src = "home.png" width = 2% height = 2% ></img>
</a>
<a href = "my_profile.html" title = "profile">
<img id = tabs_profile src = "profile.png" width = 2% height = 2% ></img>
</a>
</div>
</header>
</body>
Although the design appears satisfactory to me, I am observing blue pixels at the bottom of the first 3 images and purple pixels on the 4th one (images inside "tabs"). Surprisingly, they turn red when being clicked on and I cannot figure out the reason...