Rounded CSS tabs
I have created some rounded navigation tabs using CSS and am having implementation issues hover
.
First, there is a link to the tab site here as it is rather difficult to explain. Please hover your cursor over the left side of the tab to understand my problem. I have explained below.
I have a background image set on #navigation li elements that contain a left corner and then I have a second background image (right corner) this is set with #navigation a.
However, when I hover over the left side of the tab, only a small portion of the background is shown, I suppose this is because only the li area will hover. Obviously, I would like the entire tab to stand out the same way as the rest of them hover over it.
This was quite difficult to explain, so if you need to question me to understand the problem, please do.
source to share
A couple of things:
Eliminate the issue by taking padding from <li> and returning it to the child <a> element - the space they take up must be the same to even out the hovering.
Now you have a different problem, the left corner is not showing. Fix this by making the background color for a
and a:hover
equal transparent
instead of colors - now <li> can show.
Finally, I suggest you change the behavior from a different image entirely, to the same image with a different background, so that the rollover is loaded invisibly.
edit: css rollover without image swapping is described here
source to share
JQuery makes it easy! but you can even try a scalable box:
http://www.usabilitypost.com/2008/11/27/scalable-content-box-using-only-one-background-image/
and then change the background image on hover.
source to share
Or you can replace your li: hover and a: hover over them:
#navigation li:hover {
background: #009BDA url(images/tab_left_on.gif) no-repeat top left;
cursor : pointer;
}
#navigation li:hover a {
background: #009BDA url(images/tab_right_on.gif) no-repeat top right;
color: #FFF;
}
Please note that this may not work for IE6.
source to share