2010-07-22 3 views
2

У меня есть несколько выпадающих меню, которые, похоже, не очень хорошо выравниваются в IE8 - они хорошо выравниваются в Firefox 3 и IE7. В частности, выпадающие списки, похоже, игнорируют мое право: 0; стиль. Картина говорит тысячи слов, так это то, что он выглядит следующим образом:Выпадающее меню CSS Неправильное в IE8

Misaligned menu http://lh5.ggpht.com/_gXJgvXl6JFY/TEf9v1BmECI/AAAAAAAAAA4/iGF-Wi8CTyU/misaligned%20menu.png

Как вы можете видеть, правая часть выпадающего списка следует совместив с правой стороны выделенного «админ» ли, но это кажется, посередине.

важных стилей выпадающего CSS являются:

.ajs-menu-bar .ajs-drop-down { 
left:auto; 
right:0; 
} 

важных "администратор" стили Ли являются:

.ajs-menu-bar .ajs-menu-item, .ajs-menu-bar .ajs-button { 
float:left; 
list-style-image:none; 
list-style-position:outside; 
list-style-type:none; 
position:relative; 
} 

И HTML для этого бита:

<li class="normal ajs-menu-item"> 
<a href="#" class="user trigger ajs-menu-title" id="user-menu-link"><span><span>admin</span></span></a>   
<div class="ajs-drop-down" style="width: 111px;"> 
<ul class="section-user-status first" id="user-menu-link-user-status"> 
... bunch of <li>s    
</ul> 
</div> 
</li> 

Если кто-то мог пролить некоторый свет, который был бы велик, просто заставляя меня немного гайки :(

Заранее благодарен !!!!

Приветствия, Jenny

ответ

2

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

код ниже, вероятно, не является точным (с учетом выделения браузера), но это должно дать вам представление о том, что делать ...

<![If lt IE7]> 
    <link href="ie8.css" type="text/css" rel="stylesheet" /> 
<![End If]--> 

После того, как вы сделали это, копия CSS-код для вашего меню в этот файл (как есть) и измените поля для выпадающего:

.ajs-menu-bar .ajs-drop-down { 
left:auto; 
right:0; 
margin-right: 40px !important; 
} 

При изменении правого поля, как показано здесь не работает, попробуйте установить левое поле отрицательного значение , Я знаю, идея кажется смешной, но в моих исследованиях Liquid Design я обнаружил, что иногда это единственный способ получить что-то в этом роде.

HTH

+0

Спасибо за кучи для этого! Возможно, я не смогу использовать условное условие, так как я работаю над sitemesh, но я получаю эту идею, и CSS работает. Grr! – jenny

+0

Как сказал Робин Уильямс в Bicentenial Man ... Один рад быть полезным.^_ ^ –

Смежные вопросы