У меня проблема с макетом IE в моем меню заголовка, он хорошо работает во всех других браузерах. - PullRequest
Новая
       25

У меня проблема с макетом IE в моем меню заголовка, он хорошо работает во всех других браузерах.

0 голосов
/ 03 марта 2011

Это шаблон joomla, который я создал с нуля.

В нем есть php, как и все в joomla, но, пожалуйста, используйте css и html в своих ответах, потому что php не является одним из моих сильных навыков.

Проблема в главном меню.

Во всех других браузерах три элемента в заголовке выталкивают меню из div заголовка, помещая его чуть ниже нижней границы, где я хочубыть.

Моя высота заголовка на авто.Я не хочу, чтобы это было исправлено, и я не хочу использовать позиционирование.

Я хочу вставить его под заголовок.

Уль ли динамически создаются joomla и яЯ использую направление RTL.

Это изображение показывает проблему IE

problem

И это изображение, как я хочу это

ok

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;
    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>

1 Ответ

0 голосов
/ 03 марта 2011

IE имеет некоторые проблемы с z-index: 0;, попробуйте начать с z-index: 1;, 

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