Thanks for the quick reply. I've made the changes but now I'm presented with a new problem.
The hover image for the list items now appear in the middle of the button when I hover over (picture of an arrow). I need this at the bottom of the button - how would I do that, I've tried all sorts of background-position stuff...
For some reason my design works fine in Safari and Firefox but doesn't work in Internet Explorer - please could someone help me to correct this?
http://www.i-web-solutions.org/virgo
It's the menu area - the rest I think is fine.
Cheers,
Steve
#nav li {
border-right:1px double gray;
display:inline;
margin:0;
[b]padding-bottom:20px;
padding-top:20px;[/b]
}
#nav li a {
color:#FFFFFF;
font-size:14px;
font-weight:bold;
[b]padding:20px;[/b]
text-transform:uppercase;
}
Notice the bolded paddings. This gives the Nav items a total of 40px of padding on top and bottom, and you only want 20.
Use this code for #nav li a:
#nav li a {color:#FFFFFF;
font-size:14px;
font-weight:bold;
[b]padding: 0 20px;[/b]
text-transform:uppercase;
}
Enjoy,
Thanks for the quick reply. I've made the changes but now I'm presented with a new problem.
The hover image for the list items now appear in the middle of the button when I hover over (picture of an arrow). I need this at the bottom of the button - how would I do that, I've tried all sorts of background-position stuff...
Cheers,
Steve
#nav {
background:#2B80B6 url(images/menubg.jpg) repeat scroll 0 0;
margin: 0 15px 30px;
}
#nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
overflow:hidden;
}
#nav li {
background:transparent url(images/border.jpg) no-repeat scroll right center;
display:inline;
float:left;
height:55px;
margin:0;
}
#nav li a {
color:#FFFFFF;
display:block;
font-size:14px;
font-weight:bold;
margin-top:20px;
padding:0 20px 20px;
text-transform:uppercase;
}