So I'm re-doing my navigation. I'm told that navigation links should be a list. I converted my navigation links into a list. It looks fine except for one thing. I want the background color of the navigation menu to extend across the width of the screen. I can't get it to work in FireFox. Here's what I'm using...
Here's the source...
Here's the source...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>top nav links</title>
<style type="text/css">
body{
background-color:#fff;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin:0 5px 0 5px;
padding:0;}
#menu ul{
list-style-type:none;
margin:0;
padding:0;}
#menu ul li{
background:#000 url('navspace.jpg') right no-repeat;
display:block;
float:right;
height:18px;
overflow:hidden;
padding:0;
margin:0;}
#menu ul li a{
color:#fff;
display:block;
margin:0 18px 0 0;
padding:0;
text-align:right;
text-decoration:none;}
</style>
</head>
<body>
<div id="logo"><img src=http://www.webdeveloper.com/forum/archive/index.php/"online-Logo2.jpg" alt="BuildingBoom On-Line"></div>
<div id="menu"><ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.asp"> Contact us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"account.asp"> Account </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"subscribe.asp"> Subscribe </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"faq.asp"> FAQ </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"terms.asp"> Terms </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"why.asp"> Why BuildingBoom? </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bbsearch.asp"> Search </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.asp">Home </a></li>
</ul></div>
</body>
</html>i tried adding something like...
#menu{
background-color:#000;
width:100%;}
...but it doesn't work in Firefox.
Also, I was wondering how to disable the #menu div from wrapping to the next line.
Is there a different / better way to accomplish this in CSS?Maybe I'm mistaken but why would someone use a list for top navigation? I could see using that for left hand navigation. There has to be a better way then that.Add
#menu {
background-color:#000;
line-height:1.3em;}
and put a after your </ul> and before your </div>thanks rsd. here's what I ended up doing -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>top nav links</title>
<style type="text/css">
body{
background-color:#fff;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin:0 5px 0 5px;
padding:0;
text-align:left;}
#menu{background-color:#000;}
#menu ul{
list-style-type:none;
height:18px;
margin:0;
overflow:hidden;
padding:0;
white-space:nowrap;}
#menu ul li{
display:inline;
height:18px;
margin:0;
overflow:hidden;
padding:0;}
#menu ul li a{
background:#000 url('navspace.jpg') right no-repeat;
color:#fff;
display:block;
float:right;
height:18px;
margin:0;
overflow:hidden;
padding:0 18px 0 0;
text-align:right;
text-decoration:none;}
#menu ul li a:hover{color:#ff0;}
</style>
</head>
<body>
<div id="menu"><ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.asp"> Contact us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"account.asp"> Account </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"subscribe.asp"> Subscribe </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"faq.asp"> FAQ </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"terms.asp"> Terms </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"why.asp"> Why BuildingBoom? </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"bbsearch.asp"> Search </a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.asp">Home </a></li>
</ul></div>
</body>
Everything works out like I want it to, except for one thing now.
I think it might be a Firefox bug, because Netscape doesn't do it.
When I press 'Ctrl +' or 'Ctrl -' to change the text size, the text gets messed up. This happened in Firefox 1.0, but not Netscape 7.1 - anyone know what's up with that?
Also in Firefox, when a new page loads with the navigation in it - sometimes the text will be messed up. It looks exactly how the text does with the resize bug.
Here's the link to an example... (<!-- m --><a class="postlink" href="http://buildingboom.com/beta/header.htm">http://buildingboom.com/beta/header.htm</a><!-- m -->)
In IE 6.0 SP1, there's some wierd flickering with the :hover...
Using this code makes a complete mess in IE 5.0 SP1 and IE 5.5 SP1.
Anyone know how to do this in a more browser-friendly way?