Adding div to Panel

Adding div to Panel

I have a panel that I would like to contain some buttons and links. The buttons will act like links taking the user to anchors on the page. The links will act as a tag cloud: click a tag and that text will be highlighted on the page.

So I have this code:

  1. <div id="pagediv" data-role="page" data-theme="a">

        

        <div id="panel1" data-role="panel" data-position="left" data-display="reveal" data-theme="a">

            

               <div data-role="controlgroup" data-mini="true">

             <a href="#1" class="ui-btn ui-corner-all">Button 1</a>

     <a href="#2" class="ui-btn ui-corner-all">Button 2</a> 

       </div>

       <div id="tagdiv" onmouseover="alert('in tag div');" style="border: thin solid black">

             <a href="#" data-ajax="false">tag 1</a>

     <a href="#" data-ajax="false">tag 2</a>

     <a href="#" data-ajax="false">tag 3</a>

     <a href="#" data-ajax="false">tag 4</a>

       </div>

            

               <a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a>


    </div><!-- end panel1 -->

    . . . 


So far so good; the buttons work as expected and the tags highlight the text (script not shown). 

However, only the tags at the left of the panel are clickable. I put the border around that div and added the mouseover alert to test. Mouseover the left ~40% of the div and the alert appears. Mouseover the right ~60%, no alert appears. The same is true even if there are no tags, just a few <br/>; most of the empty box shows no alert. I find it odd that the div is defined for the correct width, as shown by the border, but the mouse events do not extend the same width.

Nota Bene: This only happens at desktop widths. That is, at 1024px the split is 60-40; at 760px it's 80-20 and at 480px the whole box shows the alert.