2012-07-12 4 views
0

나는 웹 디자인에 관해서는 멍청한 놈이다. 사이트를 만들기위한 템플릿을 다운로드했지만 내 탐색 막대가 Chrome에서 잘 보이지만 FireFox에서 올바르게 배치되지 않았으며 일부가 IE에 올바르게 배치되지 않았습니다. 아래는 제 코드입니다. 이 템플릿이 처음 시작했을 때나 내가 조정을 시작한 후에 이와 같은 것인지 확실하지 않습니다. 처음 시작할 때 미리보기 용으로 만 크롬을 사용했습니다.다른 브라우저에서 탐색 디자인을 조정하는 방법은 무엇입니까?

HTML

<nav> 
      <ul id="menu"> 
       <li class="alpha" id="menu_active"><a href="index.html"><span><span>Home</span></span></a></li> 
       <li><a href="Whatisllf.html"><span><span>What is LLF?</span></span> </a></li> 
       <li><a href="TeamManagement.html"><span><span>Team Management</span></span></a></li> 
       <li><a href="PlayerData.html"><span><span>Player Data</span></span></a></li> 
       <li><a href="PostSeason.html"><span><span>Post Season</span></span></a></li> 
       <li><a href="Forums.html"><span><span>Forums</span></span></a></li> 
       <li class="omega"><a href="PrivacyPolicy.html"><span><span>Privacy Policy</span></span></a></li> 
      </ul> 
     </nav> 

CSS 당신은 Conditional CSS를 사용할 필요가

#menu {width:100%;overflow:hidden;margin-top:3px} 
#menu li {float: left;} 
#menu a {display:block;font-size:16px;font-weight:400;color:#000;background:url(../images/menu.gif) top repeat-x;line-height:55px;text-decoration:none} 
#menu li span {display:block;background:url(../images/menu_left.gif) top left no-repeat} 
#menu .alpha span {background:url(../images/left_menu.gif) top left no-repeat} 
#menu .alpha a:hover span,#menu .alpha#menu_active a span {background:url(../images/left_menu_active.gif) top left no-repeat} 
#menu .omega span span {background:url(../images/right_menu.gif) top right no-repeat} 
#menu .omega a:hover span span,#menu .omega#menu_active a span span {background:url(../images/right_menu_active.gif) top right no-repeat} 
#menu li span span,#menu .alpha span span {background:url(../images/menu_right.gif) top right no-repeat;padding:0 24px} 
#menu a:hover,#menu #menu_active a {color:#fff;background:url(../images/menu_active.gif) top repeat-x} 
#menu a:hover span,#menu #menu_active a span {background:url(../images/menu_left_active.gif) top left no-repeat} 
#menu a:hover span span,#menu #menu_active a span span,#menu .alpha#menu_active a span span,#menu .alpha a:hover span span {background:url(../images/menu_right_active.gif) tp right no-repeat} 

답변

0

.

+0

이제 IE에서는 작동하지만 firefox에서는 작동하지 않는 것을 볼 수 있습니다 ... Firefox에 대해 어떻게합니까? –

+0

모든 브라우저 유형에 CSS를 사용할 수 있는지 확실하지 않습니다. 이 경우 자바 스크립트를 사용해야 할 수도 있습니다. [여기] (http://www.quirksmode.org/js/detect.html)를 살펴보십시오. – ODelibalta

관련 문제