Question

The tag of the following PHP echo statement is not displayed by the browser if it is empty. Found this on IE9.

echo ' <div id="'.$url['ID'].'" class="link"> '
    .'<img class="link_handle" src="http://www.google.com/s2/favicons?domain='.$urlico.'" align="middle" />'
    .'&nbsp;'
    .'<a href="'.$url->URL.'" target="_blank" onmouseOver="preview_link(\'show\', this, \''.$node['ID'].'\');" onmouseOut="preview_link(\'hide\', this, \''.$node['ID'].'\');" >'.$url->TITLE.'</a> '
    .'<a href="#" title="Edit" class="link_button_edit" onClick=""> </a>'
    .'<a href="#" title="Delete" class="link_button_delete" onClick="delete_link(\''.$url['ID'].'\');"> </a> '
    .'</div>';

the last two tags are for images. They are ignored unless I have text in <a> </a>. Why does this happen.

The images are defined in these CSS styles.

.link .link_button_edit {
   background: url("/icodeact/Edit16.png") no-repeat;
   background-size: 50%;
   cursor: pointer;
   vertical-align: bottom;
}
.link .link_button_delete {
   background: url("/icodeact/Delete16.png") no-repeat;
   background-size: 50%;
   cursor: pointer;
   vertical-align: bottom;
}

Why does this happen?

Answer 1

The <a> tag has a “display” value of “inline” by default, so if it has no content, it should not show anything.

If you want it to show the image for the background, you should make it a block and give it dimensions (width and height). That should solve your problem…