Margin nicht richtig in Firefox handeln

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

Frage

Ich habe ein sehr seltsames Problem, das für das Leben von mir das ich lösen kann. Im Grunde genommen in Safari meine Top-Navigation hat keinen oberen Rand und ist bündig mit der ganz oben auf der Seite. In Firefox wird den unteren Rand nach oben Anwendung als auch für einen Grund, warum ich nicht herausfinden kann. Wenn ich Marge in Firebug zu entfernen, wird der gefälschte obere Rand ebenfalls entfernt.

Bitte, gehe nur die Seite in Firefox, um zu sehen, was ich meine. Wenn Sie Firebug haben, deaktivieren Sie die Eigenschaft margin auf der # main-Navigation und Sie werden sehen, was geschieht.

EDIT: Vergessen Link zu Website enthält: Link-

Hier ist der Code: 

<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>

Und die 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; }

Ich habe wirklich keine Ahnung mehr, was ich zu tun, ich habe dieses ein Problem den ganzen Tag zu beheben versucht, und ich bin ganz aus Ideen, so dass ich hoffe wirklich, dass jemand helfen kann.

War es hilfreich?

Lösung

es scheint, dass der Marge Anstand wirkt wierd..it obwohl etwas im Code sein muss .. die schnelle Lösung wäre es, die Polsterung Anstand hinzufügen 

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

das funktioniert gut für mich

Andere Tipps

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

Sie könnten versuchen, mit 

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

Ich habe keine Ahnung, warum Marge dass tut, aber diese schnelle Abhilfe sollte in Ordnung sein.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top