I've changed over the menu on http://www.pricklypair.co.nz/ to an unordered
list, I'm reasonably happy with the result, it works fine in Opera, Firefox
and IE6, apart from a slight gap between the hovered link and the next menu
item's left border. I've set margin and padding to 0 on everything and that
didn't make any difference - any ideas how to remove that gap? HTML and CSS
validate ok.
Also, I've used a class 'firstlink' to remove the left border on the first
menu item - I played around with first-child but couldn't get that working
as each anchor was the first-child inside it's list item. Is what I've done
the best/only way or is there a better way.
I believe the relevant section of CSS is as follows, links to stylesheets
below
#menu{
text-align: right;
background-color: #060;
padding: 0 20px;
margin: 0;
border-bottom: solid 1px #693;
border-top: solid 1px #693;}
#menu ul {}
#menu li {
line-height: 1.8em;
padding: 0;
margin: 0;
list-style-type: none;
display: inline;}
#menu li a, #menu .thispage {
color: #f7ffeb;
text-decoration: none;
text-align: center;
border-left: solid 1px #693;
margin: 0;
padding: 0.3em 1em;}
#menu .firstlink a, #menu .firstlink .thispage {
border: none;}
#menu li a:hover, #menu li a:active {
text-decoration: underline;
background-color: #693}
Stylesheets:
http://www.pricklypair.co.nz/styles/ssbasic.css and
http://www.pricklypair.co.nz/styles/scrn_common.css
TIA
Richard
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
