开发者

CSS Horizontal Navigation Bar Alignment Problem in Firefox

My navigation bar is off in Firefox and Opera. There is noticeably more padding below the text than above. I've changed my code so many different times trying to fix this, 开发者_运维问答so I apologize if there are errors in my current code. It looks fine in Safari and Chrome. Can anyone help find my error(s)?

CSS:

ul {
list-style-type: none;
margin: 0px;
padding: 0px;
margin-bottom: 50px;
}

li {
display: inline;
margin:0;
padding:0;
}

a.one:link,a.one:visited {
font-size: 18px;
line-height: 18px;
font-weight: bold;
background-color: red;
color: white;
font-family: Helvetica,Arial,san-serif;
text-align: center;
padding: 5px 7px;
text-transform: uppercase;
text-shadow: 0.05em 0.05em 0.1em #333;
letter-spacing: 1px;
}

HTML:

<nav>
    <ul>
    <li><a class=one href=index.html>home</a></li>
    <li><a class=one href=bio.html>bio</a></li>
    <li><a class=one href=news.html>news</a></li>
    <li><a class=one href=disc.html>discography</a></li>
    <li><a class=one href=contact.html>contact</a></li>
    </ul>
</nav>

Thanks!


There is noticeably more padding below the text than above.

Here is the issue:

  • Since margin:0; and margin-bottom: 50px is set, the above/below ratio is 0px/50px

It looks fine in Safari and Chrome

Compare the default stylesheets:

  • WebCore(Safari): html.css

  • Mozilla(Firefox): html.css

  • Blink(Chromium/Opera): html.css

  • Internet Explorer User Agent Style Sheets

And lookup the vendor extensions:

  • Mozilla CSS Extensions: -moz-padding-start
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜