Tab Menu with CSS
<div id="wrapmenu">
<ol id="toc">
<li><a href="index.php"><span>Home</span></a></li>
<li><a href="samplenp.php"><span>Sample NPs</span></a></li>
<li><a href="contact.php"><span>Contact</span></a></li>
</ol>
</div>
The above HTML produces a cool tab menu at the top of my web page when I am browsing with IE and Google Chrome but not when I am browsing with Firefox. Why?
#wrapmenu {
width: 880px;
margin-left: auto ;
margin-right: auto ;
clear: left;
color: #990000;
}
ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc a {
background: #990000;
color: #E8E8E8;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #CC0000;
color: #FFFFFF;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc li {
float: left;
margin: 0 1px 0 0;
font-size: 30px;
}
ol#toc li.current a {
background-color: #FF3300;
background-position: 0 -60px;
color: #fff;
font-weight: bold;
font-size: 30px;
}
ol#toc li.current span {
background-position: 100% -60px;
}
ol#toc span {
background: 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}<pre><nowiki><div id="wrapmenu">
<ol id="toc">
<li><a href="index.php"><span>Home</span></a></li>
<li><a href="samplenp.php"><span>Sample NPs</span></a></li>
<li><a href="contact.php"><span>Contact</span></a></li>
</ol>
</div></nowiki></pre>
The above HTML produces a cool tab menu at the top of my web page
when I am browsing with IE and Google Chrome but not when I am browsing
with Firefox. Why?
<pre><nowiki>#wrapmenu {
width: 880px;
margin-left: auto ;
margin-right: auto ;
clear: left;
color: #990000;
}
ol#toc {
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc a {
background: #990000;
color: #E8E8E8;
display: block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
}
ol#toc a:hover {
background-color: #CC0000;
color: #FFFFFF;
background-position: 0 -120px;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
ol#toc li {
float: left;
margin: 0 1px 0 0;
font-size: 30px;
}
ol#toc li.current a {
background-color: #FF3300;
background-position: 0 -60px;
color: #fff;
font-weight: bold;
font-size: 30px;
}
ol#toc li.current span {
background-position: 100% -60px;
}
ol#toc span {
background: 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}</nowiki></pre>
Modified by cor-el
All Replies (2)
hi, support.mozilla.org is intended for end-user support. if you have a question regarding web development please refer to Where to go for developer support instead. thank you for your understanding!
I see not much difference between Firefox and Google Chrome with this code. There are faint vertical lines in Firefox that I do not see in Google Chrome.
