CODEWITHSUNDEEP
javascripthtmlcss
Vinay Chandra
Vinay Chandra

Reputation: 552

HTML visual not rendering properly

Please view the code here.. JS Fiddle. There is a peculiar problem that a blue colored underscore is appearing right after the first image. Why is this happening? Note that just removing the href makes it disappear. Very peculiar problem. What should be done?

HTML:

<body>
    <div id="top-bar"> 
        <a target="_blank" href="https://twitter.com/x">
            <img class="twitter" src="images/twitter.png">
        </a>
        <a target="_blank">
            <img class="twitter" src="images/twitter.png">
        </a>
        <a target="_blank" href="https://www.facebook.com/x">
            <img id="fb" src="images/fb.png"
                 onmouseover="this.src='images/fb-hover.png'"
                 onmouseout="this.src='images/fb.png'">
        </a>

    </div>
</body>

CSS:

#top-bar {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    background-color: #166330;
}
body {
    margin: 0;
    padding: 0;
    background-image: url(images/bg.png);
    background-size: 100%;
    color: white;
}
.twitter {
    margin-left: 30px;
    margin-top: 10px;
    margin-right: 10px;
    min-height: 30px;
    min-width: 30px;
    max-height: 30px;
    max-width: 30px;
}
#fb {
    min-height: 30px;
    min-width: 30px;
    max-height: 30px;
    max-width: 30px;
}

Upvotes: 0

Views: 44

Answers (4)

AdityaParab
AdityaParab

Reputation: 7100

There are two ways.

1] Remove all the white spaces between <a> <img/> and </a> tags.

2] Add text-decoration:none; to the <a> elements.

Upvotes: 3

Muhammad Ali
Muhammad Ali

Reputation: 2014

user style="text-decoration:none" in tag A

<a  style="text-decoration:none" href=....

Upvotes: 0

Virat21
Virat21

Reputation: 134

simple.. just use this

a{
  text-decoration:none;
 }

Upvotes: 0

Uwe Keim
Uwe Keim

Reputation: 40736

That's a blank inside your a tag.

If you write it without blanks like this, no "underscore" appears. E.g. something like:

<a target="_blank" href="https://twitter.com/x"><img class="twitter" 
    src="images/twitter.png"></a>

So the "underscore" is actually a link with a blank text and the browser displays links with an underscore, even if the text is just a white-space.

Upvotes: 1

Related Questions