Problem with css navigation and border radius
Posted: Tue Oct 25, 2011 2:00 pm
Im having some troubles with navigation and border radius, mainly the fact that the container my navigation sits in has a curve on the lower right, but when you hover over a link, it fills out this curve with the hover background colour.
Screenshots -
This is what it looks like before you hover over the company link

This is what it looks like while you hover over the company link

It should still maintain the curve
My code looks like this
Html -
CSS -
Now i know i could make an extra class that deals the the last link, and puts the border-radius on the hover aswell, but i plan on using a CMS package to maintain the website and this would prove difficult.
Is there something i can stick on the hover CSS style to sort this out, some sort of display option ?
Many thanks
Screenshots -
This is what it looks like before you hover over the company link

This is what it looks like while you hover over the company link

It should still maintain the curve
My code looks like this
Html -
Code: Select all
<div id="header">
<div id="headerLogo"><img src="Untitled-2.png" width="200" height="58" /></div>
<div id="headerlink" class="active">Home</div>
<div id="headerlink">Features</div>
<div id="headerlink">Benefits</div>
<div id="headerlink">How it works</div>
<div id="headerlink">Company</div>
</div>Code: Select all
#header {width:100%; height:80px; border:1px solid #ccc; border-radius: 0 0 30px 30px;
background-color:#3383a6;
background-image: -moz-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);
background-image: -webkit-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);
background-image: -o-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);
background-image: -ms-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);
background-image: linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);}
#headerLogo {float:left; width:225px; padding:10px 0 0 25px;}
#headerlink {float:left; width:139px; height:100%; border-left:1px solid #bbbbbb; font: 22px 'ComfortaaThin', Arial, sans-serif; text-align:center; line-height:75px;}
#headerlinklast {float:left; width:139px; height:100%; border-left:1px solid #bbbbbb; font: 22px 'ComfortaaThin', Arial, sans-serif; text-align:center; line-height:75px;}
#headerlink:hover{
background-color:#3383a6;
background-image: -moz-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);
background-image: -webkit-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);
background-image: -o-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);
background-image: -ms-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);
background-image: linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);}Is there something i can stick on the hover CSS style to sort this out, some sort of display option ?
Many thanks