howsa bout this... I added some padding and a duplicate border to the ul the moved the right border to the a rather than the li
/* Navigation style */
ul#primarynav {
display:block;
margin:0;
padding:1.5em 0 0.5em 0;border-bottom:5px solid #aaa;
background-color:#ccc;
font-size:85%;
}
#primarynav li {
display:inline;
list-style-type:none;
margin:0;
padding:0;
}
#primarynav li a {
width:3em;
border-right:1px solid #fff;
margin:0;
padding:1.5em 0.5em 0.5em 1.5em;
border-bottom:5px solid #aaa;
background-color:#ccc;
color:#000;
font-weight:bold;
text-decoration:none;
text-transform:uppercase;
}
Ben Bishop wrote:
Hi gurus,
Feels like a Friday. I'm replicating a designer's page concept, and the primary navigation is really bugging me now.
You can see my attempt so far, along with Browsercam results in various browsers at
http://www.daemon.com.au/test12/css/navlist.htm
I'm happy with the minimal mark-up and the font-size scalability, but:
i) In Moz and Mac browsers, the UL background colour is only as high as the LI's font-size.
ii) Sometimes the 1px right-border on a LI disappears. This is shown in the Moz images below, between Vixon and Rudolph. In Firebird I get different borders disappearing when resizing font size.
Notes: The IE6 screenshot is what I'm after across all browsers. The "button" labels are meant to be bottom-right aligned.
My attempt with DIVs had more issues cross-platform/browsers.
Any other ideas?
Thanks, Ben
***************************************************** The discussion list for http://webstandardsgroup.org/ *****************************************************
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
