Поле не работает должным образом в Firefox

StackOverflow https://stackoverflow.com/questions/1475522

Вопрос

У меня возникла очень странная проблема, которую я, хоть убей, могу решить.По сути, в Safari моя верхняя навигация не имеет верхнего поля и находится на одном уровне с самой верхней частью страницы.В Firefox он также применяет нижнее поле к верхнему, по причине, которую я не могу понять.Когда я удаляю поле в firebug, поддельное верхнее поле также удаляется.

Пожалуйста, просто зайдите на страницу в Firefox, чтобы понять, что я имею в виду.Если у вас есть firebug, отключите свойство margin в #main-navigation, и вы увидите, что происходит.

Редактировать:Забыл включить ссылку на сайт: Ссылка

Вот код:

<body>
  <div id="page-wrap">
    <ul id="main-navigation">
     <li><a href="/" id="home-link<?php if (is_home()) { echo '-active'; } ?>" class="main-nav-link">Home</a></li>
     <li><a href="/is" id="about-link<?php if (is_page("About")) { echo '-active'; }  ?>" class="main-nav-link">About</a></li>
     <li><a href="/discusses" id="articles-link<?php if (is_page("Articles")) { echo '-active'; } if (is_single()) { if (in_category( 3, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Articles</a></li>
     <li><a href="/does" id="portfolio-link<?php if (is_page("Portfolio")) { echo '-active'; } if (is_single()) { if (in_category( 4, $post->ID )){ echo '-active'; } } ?>" class="main-nav-link">Portfolio</a></li>
     <li><a href="/listens" id="contact-link<?php if (is_page("Contact")) { echo '-active'; } ?>" class="main-nav-link">Contact</a></li>
     <li><a href="/rss" id="feeds-link" class="main-nav-link">Feeds</a></li>
     <div class="clear"></div>
    </ul>

И CSS - код:

body {
 font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Trebuchet, sans-serif; font-size: 13px; color: #2a2a2a;
 border-top: 4px solid #f2f2f2;
 }

#page-wrap { width: 600px; margin: 0 auto; }

#main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 48px -10px; }
 #main-navigation li { float: left; height: 30px; }
  #main-navigation li a { display: block; cursor: pointer; margin-right: 28px; height: 30px; text-indent: -9999px; background: url(/images/storminkSprite.png) no-repeat; background-color: transparent; }

Я действительно понятия не имею, что дальше делать, я весь день пытался решить эту проблему, но у меня совершенно закончились идеи, поэтому я действительно надеюсь, что кто-нибудь сможет помочь.

Это было полезно?

Решение

похоже, что законность полей действует wierd..it должно быть что-то в коде, хотя..быстрым решением было бы добавить корректность заполнения

#main-navigation { display: block; position:relative; clear: both; margin: 0 -10px 0 -10px; padding-bottom:48px; }

для меня это прекрасно работает

Другие советы

#main-navigation {margin-bottom:0px!important;}

вы могли бы попробовать использовать 

padding-bottom: 45px and margin-left: -10px

Я понятия не имею, почему margin это делает, но это быстрое решение должно подойти.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top