Here is a simple example of a webpage:
<!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"c src="us.gif" />
</div>
</body>
</html>
You can find the HTML file and images here.
The expected output should look like this:
However, the actual display shows an underscore between the two images. I have tested this in Firefox v24 and Chrome v31.
In some scenarios, the issue goes away:
- If the order of
and<img class="selected_image"...<a href="#"...is swapped - If the first image is not wrapped in an anchor tag (
<a>)
This code is meant for language switching on a personal website. One image should always have a border while the other should be clickable. The appearance of the underscore is undesirable.
If you have any suggestions on how to solve this problem, I would appreciate it. Thank you.