Trouble creating box from unicode box symbols.

Trouble creating box from unicode box symbols.

Updated: I'm trying to make my own check box from unicode symbols.

On my screen the upper half of the box is on one line by itself in the middle of the <div>  and the bottom half of the box is on the next line left of the text. Don't know what happened here but copied clip board here and all appears ok.  Explanation would be appreciated. (I'm wondering if CSS would do this)

┌┐
└┘ Click to delete.

  • ┌┐
    └┘     bridge: Player Scores;  SELECT id, playdate, player, score FROM `bdata` ORDER BY playdate DESC, score DESC LIMIT 0,6
  • ┌┐
    └┘     bridge: Future Play Date Status;  SELECT id, player, date1, status1, date2, status2 FROM `bdata` ORDER BY player
  • ┌┐
    └┘     bridge: Pizzi Scores;  SELECT id, playdate, player, score FROM `bdata` WHERE `player` LIKE '%Piz%'


  1.  
           queryLog += '<li> <span class="delete hov" id="'+itemKey+'"';
           queryLog += '>'+box+'</span><strong>'+dbase+'</strong>: '+name+";&nbsp;&nbsp;" +sql+'</li>';

      }
     
        //if there were no items in the database
        if (queryLog == "") {
            queryLog = '<li class="empty">Log Currently Empty</li>';
           
            $("#theLog").html(queryLog);
        }
     
    $('#delboxMsg').show();
       
        $("#theLog").html(queryLog); //update the ul with the list items
       
       /////////// delete one item  ////////////
     
        $(".delete").click(function() {
        var answer = confirm("Are you sure you want to delete this time?");
     
            if (answer) {
                var itemKey = $(this).attr("id");
                localStorage.removeItem(itemKey);
     
                getAllItems(); //refresh the list of items
            }
        }); // .delete