How can I remove the underscore next to the image?

debugcn Published at Dev

Radu Murzea

Given is the following page (SSCCE, just like we all like it):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    * {
        border:0;
        margin:0;
        padding:0;
    }

    body {
        background:#BCD5E1;
        font:.85em Verdana;
    }

    #flag_panel {
        position:absolute;
        right:15px;
        top:20px;
    }

    #flag_panel img {
        vertical-align:middle;
    }

    #flag_panel .selected_image {
        border:solid 2px #444;
        padding:5px;
    }
    </style>
</head>
<body>
    <div id="flag_panel">
        <a href="#">
            <img src="ro.gif" />
        </a>
        <img class="selected_image" src="us.gif" />
    </div>
</body>
</html>

This HTML file together with the 2 images can be found at the URL: image-problem.zip (1.6 KB)

The expected result is:

expected result

But the actual result is:

actual result

As you can see, there's a little underscore between the 2 images. And I can't figure out why.

I tried this code in Firefox v24 and in Chrome v31. So I'm pretty sure I'm the one missing something.

I noticed that this problem goes away in 2 situations:

if the <img class="selected_image"... comes before <a href="#"... (a.k.a. if they're swapped)
if the first image is NOT enclosed inside an achor tag (<a>).

The goal of this piece of code is to be able to switch languages between English and Romanian on a site that I own. So one of the images must always have that border around it and the other must always be clickable. But I want to be able to do this without that underscore appearing there (looks ugly / buggy).

Any ideas on how to solve this ? Thanks.

Mr. Alien

Just use the below in your code

#flag_panel a {
   text-decoration: none;
}

Because you are using, so white space is the issue there

<a href="#">
   <img src="#" />
</a>

So that's nothing but default text-decoration

Generally you should use the below snippet in your CSS

a {
   text-decoration: none; /* Gets rid of dirty default underline */
}

Note: The above is an element selector, will select all a elements in the document, but this is a general approach so thought I should share one..

Also, I just went through your profile and I saw that you are not that friendly with HTML and CSS, so here's a tip for you, use CSS Reset stylesheet, it will save your time when dealing with cross browser inconsistencies ... Or if you are not that worried about.. than use the below snippet in your CSS..

* {
   margin: 0;
   padding: 0;
   outline: 0;
}

The above selector simply selects all the elements in your document and gets rid of all the default margin and padding of the elements which are applied by the browser default stylesheet.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-06-23

Comments

0 comments

From Dev

In mobile website, the mobile browsers asks me sporadically to open the next webpage on WHICH BROWSER? How can i remove this?

From Dev

Related Related

Article