Reputation: 719

Strange pixels in HTML img

I'm new to html, so excuse dumb questions 'n stuff. I have this page here:

<!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>

it looks good, but i get blue pixels at the bottom of the first 3 images and purple pixels on the 4th one (images inside "tabs"). They turn red when being clicked on and i dont Know why...

Upvotes: 0

Answers (2)

Bhavin Solanki

Reputation: 4818

Hi i have check your html code. You don't need to complete img tag. that line is because of text decoration of anchore tag

  a{
              text-decoration:none;
              }

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">

    <style type = text/css>
        a{
          text-decoration:none;
          }
        #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">

        <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% >
            </a>
            <a href = "lists.html" title = "list items">
                <img id = tabs_lists src = "lists.png" width = 2% height = 2% >
            </a>
            <a href = "shopping_cart.html" title = "my cart">
                <img id = tabs_cart src = "cart.png" width = 2% height = 2% >
            </a>
            <a href = "index.html" title = "return home">
                <img id = tabs_home src = "home.png" width = 2% height = 2% >
            </a>
            <a href = "my_profile.html" title = "profile">
                <img id = tabs_profile src = "profile.png" width = 2% height = 2% >
            </a>
        </div>
    </header>
</body>
</html>

Upvotes: 0

George Reith

Reputation: 13476

This is because anchors get underlined by default, and you have wrapped your images in anchors.

Add

a {
   text-decoration: none;
}

to your CSS to remove them.

The blue is the standard link color, the purple is a visited link and the red is the active state of the link in your browser's default style.

If there are other anchors on the page that you want to preserve the underlining for you should add a class to the ones containing your images and style those separately.

Upvotes: 2

Strange pixels in HTML img

Answers (2)

Related Questions