Author: Chris Hester
Comments: I found your Centred List Navbar didn't quite work in Opera 7.54. On hover, the lists were showing a gap at one side. So I've debugged it and retested in recent browsers until it worked. I found a few ways to improve it on the way. Firstly, for Opera to behave, the HTML code MUST NOT HAVE ANY LINEBREAKS! Otherwise a gap between each list will always appear that CSS cannot seem to get rid of! I found specific padding was required on both the LI and the hyperlink inside it. These both had to have matching padding (makes sense) though oddly not for the left and the right on the LI! Adding padding to the UL causes Opera to move it down a line! I had to add a zero top margin to cure this. An extra left border was also needed for the first LI to match the other ones. Firefox 0.9.3 showed an odd behaviour where the UL was 1 pixel deeper than the LI, leaving a blue line across the bottom. I found it was down to line-height, so I added a value to correct this on the UL.
Browser support chart
HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS
#navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 0;
background-color: #036;
color: white;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}
#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
text-decoration: none;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #369;
color: white;
}
#navcontainer #active { border-left: 1px solid #fff; }
ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could
work on Listamatic's simple list model. When in doubt, use the external
resource first, or at least compare both models to see which one suits your needs.