I have converted a horizontal navigation bar to use list items instead of a single row table with a table cell for each link. One of the main reasons for this was so that, when the user increases their font size, the links would wrap onto the next line instead of the navigation bar extending beyond the width of the design.
However, I have a couple questions. One of the challenges of the conversion was getting each link to act like its own cell/box so it would change background colour but stay within the top and bottom border of the navigation bar. Unlike a table cell, the list items don't stay contained within their box so easily. To solve this I set the line height of the navigation bar as follows: line-height: 1.8em; I then set the top and bottom padding of the links to 0.4em: padding: 0.4em 3px 0.4em 3px; Is this the correct way to get this to work, so the links background colour rests against the border of the navigation bar? It seems to work except when you bump the font size right up in Firefox and the background goes over the top or bottom border. Also, when the font size is put up, causing the links to wrap onto a second line, why do the top and bottom paddings overlap? Perhaps I need to look up the box model again. Finally, how can I create some sort of divider between the list items? I tried setting the right border to be 1px white, but because the list items are inline, there is an actual space between the links. This means the white border doesn't look centred between the links and it doesn't look right when hovering over a link. I can remove this space by putting all of the links onto a single line (e.g. </li><li>) but you know what Dreamweaver is like and it could separate them, thereby recreating the space. Any suggestions? Here is the relevant link and code: http://www.fit2gether.co.uk/temp/vibrogymtraining.html <div id="navigationbar"> <ul> <li><a href="./">Home</a></li> <li><a href="personaltraining.html" >Personal training</a></li> <li><a href="pilates.html" >Pilates</a></li> <li><a href="vibrogymtraining.html">Vibrogym training</a></li> etc... </ul> #navigationbar { margin-left: auto; margin-right: auto; width: 725px; border-top: 2px solid #3B3CFE; border-bottom: 2px solid #3B3CFE; background-color: #CCCCFF; } #navigationbar ul { padding: 0px; margin: 0px; border: 0px solid #000000; list-style: none; line-height: 1.8em; font-size: 0.7em; font-weight: bold; text-align: center; } #navigationbar ul li { padding: 0px; margin: 0px; border: 0px solid #FF0000; display: inline; } #navigationbar ul li a:link, #navigationbar ul li a:visited { text-decoration: none; color: #000066; padding: 0.4em 3px 0.4em 3px; border-right: 0px solid white; border-left: 0px solid white; white-space: nowrap; } #navigationbar ul li a:hover, #navigationbar ul li a:active { color: #FFFFFF; background-color: #000066; } Thanks, Stephen ******************************************************************* List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *******************************************************************
