I have an IE layout issue with my header menu, it is working nice in all the other browsers

This a joomla template I created from scratch.

It has some php, like all things in joomla, but please use css and html in your answers because php is not one of my strong skills.

The problem is the main menu.

In all the other browsers, the three elements in the header are pushing the menu out of the header div, putting it just below the bottom border where I want it to be.

My header height is on auto. I don't want to make it fixed and I don't want to use positioning.

I want to stick it under the header.

The ul li are dynamically created by joomla and I am using rtl direction.

This image shows the IE problem

And this image is how I want it

http://www.flickr.com/photos/60188007@N07/5493611091/

 #wrap
        {
            margin:0 auto;
            width:100%;
            height:auto;
            background-color:#540501;           
            min-width:1100px;    
           
        }
        
        #headr
        {
            margin:0 auto;
            width:99%;
            height:106px;
            min-width:1000px;
            background-color:#2c0300;  
             border-top:1px solid white;          
            border-bottom:1px solid white;
            border-left:2px solid white;
            border-right:2px solid white;
             -moz-border-radius: 20px;      
        -webkit-border-radius: 20px;        
        border-radius:20px;
        direction:rtl;
        }
        
        #logo
        {
            margin:0 150px;
            
        }
        #bunner
        {
            float:right;
            height:60px;
            z-index:0;
        }
        
    /****************************************************************************
         Maine Menu   
    ****************************************************************************/

        
        #maineMenu
        {
            width:73%;
            height:auto;
            min-width:900px;
            z-index:11;
            clear:both;
            
        }
        
        #maineMenu ul
        {
            list-style-type:none;  
            margin:0 auto ;
            border:none;   
        }
        
        #maineMenu ul li
        {
            margin:0 1px 0 0;
            min-width:114px;
            height:38px;
            float:left;
            text-align:center;
            line-height:37px;            
            -webkit-transition: all 0.2s ease-out;     
        }
        
        
        #maineMenu ul li a
        {
           text-decoration:none;
           color:White;
           font-size:1.2em;
           border:none;    
           display:block; 
          
        }        
        
        #maineMenu ul li a span
        {
            padding:0 6px;
            border:none;    
            display:block; 
            background-image:url("../images/buttonTopOnCenter.png");
            background-repeat: repeat-x; 
            background-position:top;
            -moz-border-radius:0 0 10px 10px;
        -webkit-border-radius:0 0 10px 10px;
        -o-border-radius:0 0 10px 10px;
        border-radius:0 0 10px 10px;
        }
        
    /*************************************************************************************
            Menu Hover
    *************************************************************************************/
        
        #maineMenu ul li:hover
        {            
             background-color:#b9c119            
            background-repeat:no-repeat;            
            position: relative; top: -2px; left: -2px;
        }
         
        #maineMenu ul li a:hover   
        {
           text-decoration:none;
           color:White;
           font-size:1.2em;
           border:none;    
           display:block; 
           background-color:#b9c119;          
           background-repeat:no-repeat; 
           background-position:top right; 
           position: relative; top: -1px; left: -1px;
        }
        
        #maineMenu ul li a span:hover
        {
            padding:0 6px;
            border:none;    
            display:block; 
            background-repeat: repeat-x;             
            background-image:url("../images/buttonTopCenter.png");
            -moz-box-shadow:  3px 3px 5px #2C0300;
       -webkit-box-shadow:  5px 5px 5px #2C0300开发者_如何学Python;
        box-shadow: 5px 5px 5px #2C0300;       
         position: relative; top: -1px; left: -1px;
         
         
        }

<div id="wrap">
        <div id="headr">
            <div id="logo">
                <jdoc:include type="modules" name="logo" style="xhtml"/>
            </div>
             <div id="topMenu">
                 <jdoc:include type="modules" name="topMenu" style="xhtml"/>                    
            </div>
            <div id="bunner">
                 <jdoc:include type="modules" name="banner" style="xhtml"/>
            </div>    
            
            
            <div id="maineMenu">
                 <jdoc:include type="modules" name="menu" style="xhtml"/>
            </div>
        </div>
    </div>

IE has some issues with z-index: 0; try starting at z-index: 1;,

#bunner
{
    float:right;
    height:60px;
    z-index:1; /*change 0 to 1*/
}