Tab navigation not working with div and image in between

Tab navigation not working with div and image in between

Hi all,

I have my tab navigation sitting on top of a banner image. My HTML is as follows:

<div id="banner">

                <div id="tabs1">
                    <ul class="tabs1">
                        <li class="view2">View:</li>   
                        <li class="detailed"><a href="#tabs-1">List</a></li>
                        <li class="list"><a href="#tabs-2">Map</a></li>
                    </ul>
           
                <div id="banner_overlay">Offer ends today</div>   
                    <img src="images/myimage.jpg" alt="banner" width="708" height="174" />           
            </div><!-- end of banner --> 
           
            <div id="tabs-1">
                <p>Tab one content here.</p>
            </div>
   
            <div id="tabs-2">
                <p>Tab two content here.</p>
            </div>
           
        </div><!-- end of tabs1 -->

I have the tab buttons absolute positioned, visually, everything is looking good. However, whenever I place the tab navigation within the banner div, the functionality of the tabs break. Is there anything I am doing wrong?

Thanks