> From: Trish Meyer
>
> I just started a template today for a garden society:
> <http://www.cybmotion.com/schs/test.htm>
>
> I can't figure out how to get rid of the "spike" when I hover over
> the nav list?
>
> <http://www.cybmotion.com/schs/stylesheets/schs1.css>
Trish,
It is because you've used the border-bottom and right-border combo.
I've exagerated it here so you can see what is happening.
#nav ul li a {
display: block;
color: #660066;
list-style-type: none;
text-decoration: none;
width: 133px;
padding: 0px 0px 1px 12px;
border-bottom-style: solid;
border-bottom-width: 30px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #DB5E8D;
border-right-width: 40px;
border-right-style: solid;
border-right-color: #FFE2A6;
background-color: #FFE2A6;
border-bottom-color: #FFFBE5;
}
#nav ul li a:hover {
background-color: #F6B733;
border-right-width: 40px;
border-right-style: solid;
border-right-color: #CA617D;
}
Use margin-bottom: 10px on those items instead.
The browser is making a mitred corner between the two borders,
and sonce they are two different colours and two different widths
you are getting that odd looking "spike", in my example it is
more clearly a mitred corner join since the borders are of more
equal width. You'll want to apply the bottom border colour to
list background colour to simulate the look it had with the
coloured bottom border.
--
Peter Williams
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
