2010-07-22 10 views
2

IE8에서 잘 정렬되지 않는 드롭 다운 메뉴가 있습니다. Firefox 3과 IE7에서 잘 정렬되어 있습니다. 특히, 드롭 다운은 내 권리를 무시하는 것 같습니다 : 0; 스타일. 당신이 볼 수 있듯이IE8에서 CSS 드롭 다운 메뉴가 잘못 정렬되었습니다.

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> 

하는 경우 누구나 위대한 것이 될 수있는 약간의 빛을 발산 할 수 있습니다. 단지 내게 약간의 열매를 낳습니다. (

미리 감사드립니다 !!!!

건배, 제니

답변

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

감사합니다. 조건부 include를 정확히 sitemesh를 사용하여 작업 할 때 사용하지 못할 수도 있지만 아이디어를 얻고 CSS가 작동합니다. Grr! – jenny

+0

Robin Williams가 Bicentenial Man에서 말했듯이 ... 사람은 기꺼이 봉사하게되어 기쁩니다.^_ ^ –

관련 문제