2010-07-07 8 views
2

나는 이것이이 내 HTML 코드파이어 폭스 문제

#zone-bar { 
background:#E5E5E5; 
min-height:30px; 
z-index:10; 
padding:5px 10px 0; 
} 
#zone-bar ul li { 
float:left; 
height:18px; 
margin-right:10px; 
position:relative; 
z-index:10; 
padding:5px 5px 0; 
} 
#zone-bar ul li:hover { 
background:#C0C0C0; 
} 
#zone-bar ul li a { 
color:#383838; 
display:block; 
float:left; 
font-size:1.1em; 
font-weight:700; 
height:23px; 
padding-right:3px; 
position:relative; 
right:-5px; 
text-decoration:none; 
top:-5px; 
} 
#zone-bar ul li a:hover,#zone-bar ul li a.zoneCur { 
background:url(images/right-hover.png) center right no-repeat; 
z-index:10; 
} 
#zone-bar ul li a span { 
position:relative; 
top:6px; 
} 
#zone-bar ul li ul { 
background:#FFF; 
border:1px solid #ccc; 
display:none; 
left:0; 
position:absolute; 
top:29px; 
width:150px; 
padding:10px 0 0; 
} 
#zone-bar ul li ul li { 
float:none; 
height:100%; 
margin:0; 
padding:0; 
} 
#zone-bar ul li ul li:hover { 
background:none; 
} 
#zone-bar ul li ul li a { 
display:block; 
float:none; 
margin-left:-5px; 
width:140px; 
padding:5px 0 0 10px; 
} 
#zone-bar ul li ul li a:hover { 
background:#C0C0C0; 
} 
#zone-bar ul { 
display:block; 
} 

는 CSS 코드입니다 내 웹 사이트의 상단에있는 드롭 다운 메뉴가 파이어 폭스에 문제가

<div id="zone-bar"> 
    <ul><li> 
    <a href="#"><span>My Account &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
     <ul> 
      <li><a href="#">My Account</a></li> 
      <li><a href="#">My Channel</a></li> 
      <li><a href="#">My Videos</a></li> 
      <li><a href="#">Favorites</a></li> 
      <li><a href="#">Playlists</a></li> 
      <li><a href="#">Friend Requests (1)</a></li> 
      <li><a href="#">Logout</a></li> 
    </ul></li> 
    <li> 
    <a href="#"><span>Messages &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
     <ul> 
      <li><a href="#">Messages (1)</a></li> 
      <li><a href="#">Compose New Message</a></li> 
      <li><a href="#">Notifications (0)</a></li> 
    </ul></li>    
    <li> 
    <a href="#"><span>Videos &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
     <ul> 
        <li><a href="#">Recent</a></li> 
        <li><a href="#">Viewed</a></li> 
        <li><a href="#">Featured</a></li> 
        <li><a href="#">Top Rated</a></li> 
        <li><a href="#">Commented</a></li> 
    </ul></li> 
    <li> 
    <a href="#"><span>Channels &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
     <ul> 
        <li><a href="#">Recent</a></li> 
        <li ><a href="#">Viewed</a></li> 
        <li ><a href="#">Featured</a></li> 
        <li ><a href="#">Top Rated</a></li> 
        <li ><a href="#">Commented</a></li> 
    </ul></li> 
    <li> 
    <a href="#"><span>Groups &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
     <ul> 
      <li><a href="#">Create New Group</a></li> 
         <li><a href="#">All Time</a></li>  
         <li><a href="#">Today</a></li>  
         <li><a href="#">Yesterday</a></li>  
         <li><a href="#">This Week</a></li>  
         <li><a href="#">Last Week</a></li>  
         <li><a href="#">This Month</a></li>  
         <li><a href="#">Last Month</a></li>  
         <li><a href="#">This Year</a></li>  
         <li><a href="#">Last Year</a></li>     
    </ul></li> 
    <li> 
    <a href="#"><span>Upload &nbsp; <em><img src="images/arrow.png" alt="dropdown"></em></span></a> 
       <ul> 
         <li><a href="#">Upload New Video</a></li> 
         <li><a href="#">My Videos</a></li> 
    </ul></ul> 
    </div> 

당신에게 doctorwhohd.com에서 라이브 데모를 볼 수 있습니다

문제 메신저 외장이는 다음과 같습니다 파이어 폭스를 제외한 모든 브라우저는 당신이 항목 위에 마우스를 할 때 정상에 ,224,991

7,053,210 파이어 폭스의 모든 버전 나는이 alt text http://www.freeimagehosting.net/uploads/4c9689da0b.png

어떤 도움이 좋을 것 얻을! 이것은 문제를 해결할 수없는 것처럼 보이며 뭔가 실종되었다고 확신합니다.

답변

1

귀하의 마크 업, <em><img> 태그를 감싸고 스타일링을 위해 &nbsp;를 사용하지 않는 이유 최상위 레벨 <li> 태그 추가 <span> 태그가 왜

, 우선 정말 밉다.

먼저 청소하십시오.

둘째로, 필요하지 않은 절대 및 상대 위치 스타일이 많이 있습니다. 상대 위치와 절대 위치를 사용하지 않고 탐색 스타일을 시도 했습니까?

여기서 상대 위치 지정이 유용한 유일한 곳은 작은 화살표 이미지입니다.

사용해보세요.

+0

도움 주셔서 감사합니다. 천천히 배우십시오. – cameronmarklewis

1

# 구역 바 ul li에 내용을 초과하는 li의 너비이므로 명시적인 너비를 지정할 수 있습니다.

각 li에 ID 또는 클래스를 지정하여 너비를 개별적으로 제어 할 수 있습니다.