Rounded CSS tabs

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.

From stackoverflow

• 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

  annakata : ithankyou - it's easy enough to see your way through these things if you imagine building the page as bits of physical paper, I just made one of those bits acetate :)

• 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.

• 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.

  annakata : definitely won't work in IE6 (li:hover not supported) but that's not always a problem

  annakata : (not that the original solution works in IE6 either...)

  Ronnie : When you say the solutions will not work in IE6. Are you saying that the problem will simply be what i have currently, or after implementing your methods will it look horribly wrong in IE6?

  Mg : Neither your page, or my solution will work since li:hover is not supported on IE6.

  Ronnie : Ok, i understand. Thank you for your help.

  annakata : but this is impossible to fix for IE6 you'd have to go with a JS solution or a different design -the market share for that browser is so poor now I wouldn't care unless you have to

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