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;
andmargin-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
精彩评论