Rounded CSS tabs

Question

Hello,

I have created some rounded navigation tabs using CSS and am having trouble when implementing:

hover

Firstly here is a link to the site Tabs as it is quite difficult to explain. Please, hover over the left side of the tabs to understand my problem. I have explained below.

I have a background image set on #navigation li items this contains the left side corner and i then have a second background image (the right corner) this is set using #navigation a.

However when i hover over the left side of the tab, only a small piece of background is shown, i presume this is because only the li area is being hovered over. Obviously i would like the entire tab to highlight as it does when you hover over the rest of it.

This was quite hard to explain so if you need to question me further to understand the problem please do.

Answer 1

Couple of things:

Fix the problem by taking the padding off the <li> and putting it back on the child <a> - the space they occupy needs to be the same to get the hovers to align.

Now you have a different problem, the left corner doesn't show. Fix this by making the background colour for the a and a:hover equal to transparent instead of the colours - now the <li> can show through.

Finally, I suggest you change the behaviour from being another image entirely, to the same image with a different background-position, so the rollover loads invisibly.

edit: css rollover without image swap described here

Answer 2

With jQuery it's super easy! but you can even try 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.

Answer 3

Or you can replace your li:hover and a:hover with these:

#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;
}

Note that it may not work IE6.

Answer 4

There is also another eye catching tab named boxy tab. Thanks.