Проблема CSS: Меню дружественных CSS адаптеров jqGrid и ASP.Net - IE7 - PullRequest
Новая
       23

Проблема CSS: Меню дружественных CSS адаптеров jqGrid и ASP.Net - IE7

1 голос
/ 04 марта 2010

У меня проблема в IE 6 и 7 при использовании jqGrid (v3.6.4) и ASP.Net CSS Friendly Adapters для элемента управления меню ASP.Net. Проблема, с которой я сталкиваюсь, состоит в том, что мои уровни меню отображаются под моей сеткой независимо от того, насколько высоко я поднимаюсь с z-индексом, а только с моим вертикальным меню (используя .AspNet-Menu-Vertical). При использовании горизонтальной сетки подуровни отображаются поверх сетки. Все работает как рекламируется в моей голове, используя Firefox или IE8.

альтернативный текст http://www.holenet.com/jqGridMenuIssue.jpg

Мое объяснение этого, вероятно, в конечном итоге будет содержать некоторые недостающие детали (недостающие кусочки головоломки CSS), которые были опущены, поэтому, пожалуйста, просто попросите что-нибудь, что нужно уточнить. Я не уверен, что, возможно, проблема вызвана смешением абсолютных и относительных положений или чем-то еще полностью. Может быть, кто-то еще сразу увидит, это уклоняется от меня. И заранее благодарю за любую помощь или руководство, которое вы можете дать.

Хорошо, позвольте мне выложить детали. Я использую jqGrid версии 3.6.4 с поддержкой фреймворка jQuery UI. Я также использую собственную тему пользовательского интерфейса jQuery, но не было добавлено или изменено никакого специального стиля, кроме изменения цвета и т. П.

Код компоновки 

<div id="ContentAreaBlock">
<asp:Panel ID="PanMainVerticalMenu" runat="server" 
      CssClass="mainVerticalMenuContainer">
    <div class="mainVerticalMenuBlock">
        <asp:menu id="MenuMainVerticalNavigation" runat="server" 
            cssselectorclass="MenuMainNavigation" Orientation="Vertical"/> 
    </div>
</asp:Panel>

<asp:Panel ID="PanContentContainer" runat="server" CssClass="contentContainer
      ContentLeftMargin Contentfont">
    <div style='width: 100%'>
        <div id="gridWrapperAssets">
            <table id="gridTableAssets"></table> 
            <div id="pagerAssets" style="text-align:center;"></div> 
        </div>
    </div>
</asp:Panel>
</div>

Я ненавижу не иметь FireBug в IE! Я использую панель инструментов разработчика IE, не очень хорошо, но я перечислю текущий стиль для соответствующих блоков и последую за ним с кодом CSS для блоков.

Текущий стиль для Div "ContentAreaBlock" 

border: solid 1px #1b1b1b;
display: block;

Текущий стиль для панели "PanMainVerticalMenu" 

position: absolute; 
left: 0; 
top: 0;
display: block;

Текущий стиль для Div с классом "mainVerticalMenuBlock" 

display: block;
hasLayout: -1;
position: relative;
width: 107px;
zoom: 100%;

Текущий стиль для вертикального меню уровня 1 

display: block;
line-height: 1;
margin: 0px;
position: relative;
z-index: 1300;

Текущий стиль для панели с классами CSS "contentContainer ContentLeftMargin Contentfont" 

display: block;
font-size: 1.1em;
margin: auto 10px auto 75px;
padding: 8px 0px 8px 0px;

Текущий стиль для таблицы "gridTableAssets" 

background: #f0eee5 url('some image') 50% 50%;
border: solid 1px #d9d6c4;
display: block;
hasLayout: -1;
line-height: 1;
margin: 0px;
position: relative;
unicode-bidi: embed;
width: 870px;
z-index: 0;

CSS-код для меню 

.mainVerticalMenuContainer
{
    position: absolute; 
    left: 0; 
    top: 0; 
    margin: 14.5em 0 0 0.5em;
}

.mainVerticalMenuBlock
{
    width: 107px; 
    background-color: #e5ebdf; 
    border: solid 1px #475460;
    padding: 0.3em 0 0.3em 0;
}

ul.AspNet-Menu 
{
    position: relative;
}

ul.AspNet-Menu, ul.AspNet-Menu ul
{
    margin: 0;
    padding: 0;
    display: block;
}

ul.AspNet-Menu li
{
    position: relative;
    list-style: none;
    float: left;
}

ul.AspNet-Menu li a, ul.AspNet-Menu li span
{
    display: block;
    text-decoration: none;
}

ul.AspNet-Menu ul
{
    position: absolute;
    visibility: hidden;    
}

.MenuMainNavigation .AspNet-Menu-Vertical
{
    position:relative;
    z-index: 1300;
}
.MenuMainNavigation .AspNet-Menu-Vertical ul.AspNet-Menu
{
    width: 107px;
}
.MenuMainNavigation .AspNet-Menu-Vertical ul.AspNet-Menu ul
{
    background: #d2e2ca;
    width: 19em;
    top: 0px;
    left: 105px;
    border: solid 2px #253d56;
    z-index: 1400; /*TESTING Made it 1400 from 400 */
}
.MenuMainNavigation .AspNet-Menu-Vertical ul.AspNet-Menu ul ul
{
    width: 19em;
    z-index: 1500;
}
.MenuMainNavigation ul.AspNet-Menu ul li a, .MenuMainNavigation ul.AspNet-Menu ul li span
{
    display: block;
    margin: 0;
    padding: 0;
    text-align: left;
    border: none;
}

Ответы [ 2 ]

2 голосов
/ 06 апреля 2010

Можете ли вы изменить порядок PanMainVerticalMenu и PanContentContainer, чтобы контейнер был первым? Ранее у меня были проблемы с IE7, где он игнорирует z-index и просто использует порядок элементов.

Поскольку ваше PanMainVerticalMenu находится в положении: абсолютно стиль должен быть таким же ... 

<div id="ContentAreaBlock">
<asp:Panel ID="PanContentContainer" runat="server" CssClass="contentContainerContentLeftMargin Contentfont">...</asp:Panel>

<asp:Panel ID="PanMainVerticalMenu" runat="server" CssClass="mainVerticalMenuContainer">...</asp:Panel>
</div>

ContentAreaBlock может нуждаться в положении: относительно ой, и вы уже пробовали firebug lite ?

1 голос
/ 31 марта 2010

Попробуйте добавить зум к каждому элементу , который имеет положение: относительно 

zoom: 1;

Похоже, что некоторые элементы имеют зум, но не все, что нужно. Для меня это звучит как классический hasLayout Ошибка в IE.

...