1. 홈
  2. 질의 응답
  3. 파이어 폭스와 크롬에서 CSS 테두리와 탐색 메뉴 높이가 다른 경우

파이어 폭스와 크롬에서 CSS 테두리와 탐색 메뉴 높이가 다른 경우

2011-07-01 4 views
0

내 웹 사이트의 strongape.com에서 파이어 폭 상단과 하단 테두리가 정렬되지 않고 탐색 메뉴가 약간 겹칩니다. 누군가가 이것을 디버깅 할 수 있습니까? 고맙습니다. 내 CSS 파일은 다음과 같습니다.파이어 폭스와 크롬에서 CSS 테두리와 탐색 메뉴 높이가 다른 경우

html{ 
    height: 100%; 
} 

body { 
    padding-top: 50px; 
    height: 100%; 
    font-family: Verdana, Helvetica, Arial; 
    margin-bottom: 100%; 
    margin-top: 0px; 
    font-size: 14px; 
    /* fallback (Opera) */ 
    background: #008800; 
    /* Mozilla: */ 
    background: -moz-linear-gradient(top, #617C58, #00FFFF); 
    /* Chrome, Safari:*/ 
    background: -webkit-gradient(linear, 
      left top, left bottom, from(#617C58), to(#00FFFF)); 
    /* MSIE */ 
    filter: progid:DXImageTransform.Microsoft.Gradient(
      StartColorStr='#617C58', EndColorStr='#00FFFF', GradientType=0); 
} 

#binder { 
    width: 65%; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 10%; 
    padding-right: 10%; 
    background: url(/images/middle.png); 
    background-size: 100%; 
    -moz-background-size: 100%; 
    -webkit-background-size: 100%; 
    background-repeat:repeat-y; 
    font-size: 12px; 
    padding-bottom: 20px; 
    padding-top: 20px; 
} 

#top_bar { 
    width: 65%; 
    margin-left: auto; 
    margin-right: auto; 
    padding-right: 10%; 
    padding-left: 10%; 
    margin-bottom: 0px; 
    margin-top: 0px; 
    padding-bottom: 30px; 
    padding-top: 0px; 
    background: url(/images/top_and_bottom_bar.png); 
    -moz-background-size: 100%; 
    -webkit-background-size: 100%; 
    -moz-border-radius-topright: 25px 50px; 
    -webkit-border-top-right-radius: 25px 50px; 
    border-top-right-radius: 25px 50px; 
} 

#bottom_bar { 
    width: 65%; 
    margin-left: auto; 
    margin-right: auto; 
    padding-right: 10%; 
    padding-left: 10%; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    padding-top: 30px; 
    background: url(/images/top_and_bottom_bar.png); 
    -moz-background-size: 100%; 
    -webkit-background-size: 100%; 
    -moz-border-radius-bottomright: 25px 50px; 
    -webkit-border-bottom-right-radius: 25px 50px; 
    border-bottom-right-radius: 25px 50px; 
} 

/* Navigation Tabs http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html */ 
/* http://www.cuberick.com/2010/05/simple-tabbed-navigation-in-rails.html */ 
.menu { 
    margin-left: 30%; 
    margin-bottom: 57px; 
} 

.menu ul { 
    list-style:none; 
} 

.menu ul li { 
    display:inline; 
    float:left; 
} 

/* :first-child pseudo selector with rounded top left corner */ 
.menu ul li:first-child a { 
    -moz-border-radius-topleft: 12px; 
    -webkit-border-top-left-radius:12px; 
} 

/* :last-child pseudo selector with rounded top right corner */ 
.menu ul li:last-child a { 
    -moz-border-radius-topright: 12px; 
    -webkit-border-top-right-radius:12px; 
} 

/* background color set to RGBA, with opacity on 0.3 and also using text-shadow */ 
.menu ul li a { 
    padding:20px; 
    background: rgba(255,138,30,0.3); 
    text-decoration: none; 
    font: bold 20px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    color: #402e16; 
    text-shadow: #eee 0px 0px 2px; 
} 

/* hover state shows a linear gradient and opacity it brought down to 0.9 and also shows a very slight grey shadow on top */ 
.menu ul li a:hover { 
    -moz-box-shadow: 0 -5px 10px #777; 
    -webkit-box-shadow: 0 -5px 10px #777; 
    background: -webkit-gradient(linear, right bottom, left top, color-stop(0, rgb(237,227,112)), color-stop(0.72, rgb(255,173,10))) !important; 
    background: -moz-linear-gradient(right bottom, rgb(237,227,112) 0%, rgb(255,173,10) 72%) !important; 
    background-color:rgb(255,173,10) !important; 
    -moz-opacity:.90; 
    filter:alpha(opacity=90); 
    opacity:.90; 
} 

/* another RGBA background, now with an opacity of 0.8 */ 
.menu ul li a.active { 
    background: rgba(255,138,30,0.8) !important; 
} 

#bottom { 
    padding-top: 12px; 
    font-size: 12px; 
    text-align: center; 
} 

.homepage { 
    width: 100%; 
    font-size: 24pt; 
} 

.homepage_border { 
    border-style: none; 
    border-width: 1px; 
} 

.top_border{ 
    border-width: 1px; 
    border-style: solid; 
    border-bottom: none; 
    border-right: none; 
    border-left: none; 
    margin-left: -1em; 
    margin-right: 1em; 
}

다음은 HTML입니다. 웹 사이트에서 소스를 쉽게 볼 수 있습니다. 다시 한번 감사드립니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>StrongApe</title> 
    <link href="/stylesheets/application.css?1308946065" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/jquery-ui-1.8.4.custom.css?1299304515" media="screen" rel="stylesheet" type="text/css" /> 
    <script src="/javascripts/jquery.js?1299304515" type="text/javascript"></script> 
<script src="/javascripts/rails.js?1299304515" type="text/javascript"></script> 
<script src="/javascripts/application.js?1309552670" type="text/javascript"></script> 
    <script src="/javascripts/jquery.js?1299304515" type="text/javascript"></script> 
<script src="/javascripts/rails.js?1299304515" type="text/javascript"></script> 
    <link href="/stylesheets/application.css?1308946065" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/jquery-ui-1.8.4.custom.css?1299304515" media="screen" rel="stylesheet" type="text/css" /> 
    <script src="/javascripts/jquery-1.6.1.min.js?1308722519" type="text/javascript"></script> 
<script src="/javascripts/jquery-ui-1.8.4.custom.min.js?1299304515" type="text/javascript"></script> 
<script src="/javascripts/jquery.cluetip.min.js?1308722519" type="text/javascript"></script> 
<script src="/javascripts/rails.js?1299304515" type="text/javascript"></script> 
<script src="/javascripts/jquery.flot.pack.js?1308722519" type="text/javascript"></script> 
<script src="/javascripts/jquery.flot.js?1308722519" type="text/javascript"></script> 
<script src="/javascripts/jquery.flot.resize.js?1308722519" type="text/javascript"></script> 
<script src="/javascripts/excanvas.pack.js?1308722519" type="text/javascript"></script> 
<script src="/javascripts/excanvas.min.js?1308722519" type="text/javascript"></script> 
    <meta name="csrf-param" content="authenticity_token"/> 
<meta name="csrf-token" content="pf43on62OPA7k0rJbvtBiw6wyrdmbJTpauHcH48Jz9I="/> 
    <div class="menu"> 

    <ul> 
     <li> 

    <a href="/home/index" class="active">Home</a></li> 
     <li> 
    <a href="/athletic_programs" class="">Workout Routines</a></li> 
     <li> 
    <a href="/date_of_workouts" class="">Workout Log</a></li> 
     <li> 
    <a href="/home/about" class="">About</a></li> 

     <!--<li> 
    <a href="/metrics" class="">Health</a></li>--> 
    </ul> 
    </div> 
</head> 
<body> 
    <div id="top_bar"></div> 
    <div id="binder"> 
    <div class="hmenu"> 
     <a href="https://stackoverflow.com/users/sign_up">Register</a> 

     <a href="https://stackoverflow.com/users/sign_in">Login</a> 

    </div> 
    <p id="notice"></p> 
    <p id="alert"></p> 
    <img alt="StrongApe" id="gorilla" src="/images/banner.png?1299304515" /> 
<table class="homepage"> 
    <tr> 
    <th class="header1"><a href="https://stackoverflow.com/users/sign_up">Register</a></th> 

    <th class="header1"><a href="https://stackoverflow.com/users/sign_in">Login</a></th> 
    </tr> 
</table> 
<table class="homepage"> 
    <tr> 
     <tr> 
    <th class="header2">Fitness Routines</th> 
     </tr> 
     <tr> 

    <td class="homepage_border"> 
     <li>Fully Customizable</li> 
     <li>Printable</li> 
     <li>Save and Share with Anyone</li> 
     <!--<>Quickly Email</li>--> 
    </td> 
     </tr> 

    <tr> 
     <th class="header1"><a href="/athletic_programs">Create or Find a Workout Routine</a></th> 
    </tr> 
    </tr> 
    <tr> 
    <tr> 
     <th class="header2">Fitness Log</th> 
    </tr> 

    <tr> 
     <td class="homepage_border"> 
     <li>Track Progress</li> 
     <!--<>Use from Mobile</li> 
     <li>Track Any Variable</li> 
     <li>Graph Progress</li>--> 
     </td> 
    </tr> 
    <tr> 
     <th class="header1"><a href="/date_of_workouts">Log Your Activity</a></th> 

    </tr> 
    </tr> 
</table> 

    </div> 
    <div id="bottom_bar"></div> 
</body> 
</html>

출처

2011-07-01 Todd

+4

또한 HTML이 필요합니다. 그렇게하지 않았다면 nav를 다루지 않는 CSS를 제거해야합니다. –

+0

HTML을 추가하고 관련성이없는 CSS를 제거했습니다. 고맙습니다. – Todd

답변

1 
.menu { margin-bottom:0; } 
.menu ul { margin:0; overflow:hidden; } 
.menu ul li a { display:block; }

당신은 중복 CSS를 많이 가지고 - 당신이 두 번 일부 파일을로드하는 나타납니다.

코드도 매우 훌륭합니다. 당신의 접근법을 재고하고 싶을 수도 있습니다.

위의 수정은 FF5.0에서 제대로 작동하지만 Chrome에서 변경된 사항을 테스트하지 않았습니다. enter image description here

출처

2011-07-01 21:10:54 Ross

+0

당신은 무엇을 염두에 두셨습니까? 나는 초보자라는 것을 알고있다. – Todd

관련 문제

 관련 문제