html - CSS border and Nav menu height different in Firefox vs Chrome -
in website strongape.com, firefox top , bottom border don't align navigation menus overlap slightly. can me debug this? thank you. here's css file:
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 rounded top left corner */ .menu ul li:first-child { -moz-border-radius-topleft: 12px; -webkit-border-top-left-radius:12px; } /* :last-child pseudo selector rounded top right corner */ .menu ul li:last-child { -moz-border-radius-topright: 12px; -webkit-border-top-right-radius:12px; } /* background color set rgba, opacity on 0.3 , using text-shadow */ .menu ul li { 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 linear gradient , opacity brought down 0.9 , shows 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; } /* rgba background, 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; } here's html. can view source on website if that's easier. again.
<!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="/users/sign_up">register</a> <a href="/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="/users/sign_up">register</a></th> <th class="header1"><a href="/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 , share anyone</li> <!--<>quickly email</li>--> </td> </tr> <tr> <th class="header1"><a href="/athletic_programs">create or find 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 mobile</li> <li>track variable</li> <li>graph progress</li>--> </td> </tr> <tr> <th class="header1"><a href="/date_of_workouts">log activity</a></th> </tr> </tr> </table> </div> <div id="bottom_bar"></div> </body> </html>
.menu { margin-bottom:0; } .menu ul { margin:0; overflow:hidden; } .menu ul li { display:block; } you have lot of duplicate css - appears you're loading files twice.
your code also, quite, well, unusual. might want rethink approach.
the fix above works in ff5.0, haven't tested changes in chrome. 
Comments
Post a Comment