My coding is working as i wish in Firefox and Internet Explorer. But in Safari, Chrome and Opera the is a small break at the end of the list next to the misc tab. Here is the link and i will provide the code soon. bb24 Arcade
Hi nih205. Welcome to SitePoint. 
I’m not sure the page is working, or I can’t see what you are referring to. I get a page that says:
nlh205’s computer is offline
(FWIW, the page was visible earlier, so there must be some sort of temporary problem.)
The page is now working. Im sorry for that.
Here’s the code.
style.css:
html
{
border:0px;
margin:0px;
outline:0px;
padding:0px;
}
body
{
background-image:url(images/back.jpg);
background-repeat:repeat;
background-position:right top;
color:#000;
font:Arial Black, Gadget, sans-serif;
}
a
{
color:#000;
}
#wrap
{
position:relative;
text-align:center;
width:750px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border:0px;
outline:0px;
padding:0px;
}
#top
{
text-align:center;
background:#000;
width:100%;
filter:alpha(opacity=60);
opacity:0.6;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
height:75px;
margin-bottom:10px;
}
#top div
{
text-align:center;
background:#F60;
width:100%;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
height:75px;
vertical-align:middle;
}
#top_content
{
color:#000;
text-shadow:0px 2px 3px #222;
font:56px Verdana, Geneva, sans-serif;
}
#bottom
{
text-align:center;
background:#000;
width:100%;
filter:alpha(opacity=60);
opacity:0.6;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
height:650px;
margin-top:10px;
}
#menu
{
text-align:center;
display:block;
width:100%;
height:32px;
position:relative;
top:20px;
}
#nav
{
width:100%;
float:left;
text-align:center;
margin-bottom:3em;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
list-style:none;
background-color:#F60;
}
#nav li
{
float:left;
width:93.75px;
display:block;
}
#nav li a
{
display:block;
padding:8px 15px;
text-decoration:none;
font-weight:bold;
}
#nav li a:hover
{
background-color:#F90;
}
index.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>bb24 Arcade</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="wrap">
<div id="top">
<div>
<div id="top_content"><strong>bb24 Arcade</strong></div>
</div>
</div>
<div id="bottom">
<div id="menu">
<ul id="nav">
<li><a href="#">Action</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Arcade</a></li>
<li><a href="#">Puzzle</a></li>
<li><a href="#">Shooting</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Strategy</a></li>
<li><a href="#">Misc</a></li>
</ul>
</div>
content
</div>
</div>
</body>
</html>
This came up in a recent post, but I’ve lost the link. Anyhow, if you are willing to remove the fixed widths from each LI, you could unfloat the last LI, give it a class of, say, “last”, and then set it to:
#nav li.last
{
float:none;
overflow:hidden;
zoom:1.0;
}
Then alter the left/right padding on the <a>:
#nav li a
{
display:block;
padding:8px [COLOR="Red"]20[/COLOR]px;
text-decoration:none;
font-weight:bold;
}
and remove the widths on the LIs:
#nav li
{
float:left;
[COLOR="Red"]width:93.75px;[/COLOR] /* remove */
display:block;
}
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>bb24 Arcade</title>
<style>
html
{
border:0px;
margin:0px;
outline:0px;
padding:0px;
}
body
{
background-image:url(images/back.jpg);
background-repeat:repeat;
background-position:right top;
color:#000;
font:Arial Black, Gadget, sans-serif;
}
a
{
color:#000;
}
#wrap
{
position:relative;
text-align:center;
width:750px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border:0px;
outline:0px;
padding:0px;
}
#top
{
text-align:center;
background:#000;
width:100%;
filter:alpha(opacity=60);
opacity:0.6;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
height:75px;
margin-bottom:10px;
}
#top div
{
text-align:center;
background:#F60;
width:100%;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
height:75px;
vertical-align:middle;
}
#top_content
{
color:#000;
text-shadow:0px 2px 3px #222;
font:56px Verdana, Geneva, sans-serif;
}
#bottom
{
text-align:center;
background:#000;
width:100%;
filter:alpha(opacity=60);
opacity:0.6;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
height:650px;
margin-top:10px;
}
#menu
{
text-align:center;
display:block;
width:100%;
height:32px;
position:relative;
top:20px;
}
#nav
{
width:100%;
float:left;
text-align:center;
margin-bottom:3em;
margin-left:auto;
margin-right:auto;
margin-top:0px;
padding:0px;
list-style:none;
background-color:#F60;
}
#nav li
{
float:left;
display:block;
}
#nav li a
{
display:block;
padding:8px 20px;
text-decoration:none;
font-weight:bold;
}
#nav li a:hover
{
background-color:#F90;
}
#nav li.last
{
float:none;
overflow:hidden;
zoom:1.0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<div>
<div id="top_content"><strong>bb24 Arcade</strong></div>
</div>
</div>
<div id="bottom">
<div id="menu">
<ul id="nav">
<li><a href="#">Action</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Arcade</a></li>
<li><a href="#">Puzzle</a></li>
<li><a href="#">Shooting</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Strategy</a></li>
<li class="last"><a href="#">Misc</a></li>
</ul>
</div>
content
</div>
</div>
</body>
</html>
Thanks greatly. Your suggestion worked great. I was fiddling with that for a while and im still kind of new to the div and css layouts and css in general so your help was appreciated.
You’re welcome. That solution of unfloating the last LI was a trick posted by Paul O’Brien (our resident guru) just a week or so ago. It was fun to give it a go.