I am presenting the code below:
<div class="settingsMenu" style="top: 135px; left: 149px; display: block;">
<ul>
<li class="download" onclick="downTemplate('template1')">Download</li>
<li class="delete" onclick="showConfirmationDialog ($(this))">
Delete
<div class="deleteItemConfirmation">
<div class="confirmationText">Are you sure?</div>
<div class="buttons"><button onclick="deleteTemplate ('template1')">Yes</button> <button onclick="hideConfirmationDialog();">No</button></div>
</div>
</li>
<li class="info">Info</li>
</ul>
</div>
CSS:
.settingsMenu{
position: absolute;
top: 0;
left: 0;
display: none;
background-color: #FFFFFF;
border: 1px solid #b5044a;
border-radius: 5px;
width: 150px;
padding: 10px 0;
margin: 0;
z-index: 200;
}
.settingsMenu ul{
list-style-type: none;
width: 100%;
margin: 0px;
padding: 0;
}
.settingsMenu ul li {
color: #000000;
cursor: pointer;
float: left;
font-size: 14px;
font-weight: normal;
font-family: Arial;
height: 18px;
max-width: 100px;
margin: 5px 20px;
padding: 0;
display: block;
padding-left: 30px;
}
.settingsMenu ul li.edit{
background: url("../img/edit-context-menu-icon.svg") no-repeat scroll center left white;
}
.settingsMenu ul li.delete{
background: url("../img/delete-context-menu-icon.svg") no-repeat scroll center left white;
}
.settingsMenu ul li.info{
background: url("../img/info-context-menu-icon.svg") no-repeat scroll center left white;
}
Issue is: when div.deleteItemConfirmation has "display: none;", everything displays correctly. But, when its display property changes to "display: block," a strange space appears before the text of
<li>Delete</li>