CSS - Fit To Edges

I'm making a menu with buttons that have curved edges. I can make the edges and everything fine, but how can I make it so if I hover over the whole <li>, it changes the background of the 3 <span> tags underneath it?

You'll understand when you see the demo. The menu I'm talking about is the orange bar. It won't work in IE, check it in Firefox, Safari, Opera, or Chrome.

Try hovering over the menu items that aren't highlighted, and they don't light up.

itsjareds.leadhoster.com/spogg/phoenix.html

Sorry about the non-clickable link, user restrictions..

Post if you need any clarification (I know it's not clear).

Is there anyway on CSS or javascript to do "smooth edges on screen fonts" for every user to view my web?

styles.css
Code:

.allRoundedCorners {
border-radius-topleft: 18px; -moz-border-radius-topleft: 18px; -webkit-border-top-left-radius: 18px;
border-radius-topright: 18px; -moz-border-radius-topright: 18px; -webkit-border-top-right-radius: 18px;
border-radius-bottomleft: 18px; -moz-border-radius-bottomleft: 18px; -webkit-border-bottom-left-radius: 18px;
border-radius-bottomright: 18px; -moz-border-radius-bottomright: 18px; -webkit-border-bottom-right-radius: 18px;
}

index.php
Code:

<div class="allRoundedCorners">
my text
</div>

This works ok in Firefox, Google Chrome and Safari.

But fails to work in IE 9, Avant Browser 2012 build 8 and Opera 11.60

Can anyone suggest a possible fix or know how I can code it so the rounded edges of the DIV's have the rounded edge and not a boxed area.

Hi,

I'm trying to make a table that will hold a bunch of thumbnail images - three columns and however many rows are necessary. I would like this table to have a border on of the cells EXCEPT for any border on the outside of the table, so it should look like this:


Code:

     |          | 
----------------------
     |          |
----------------------
     |          |

Is there some nice little CSS code that will do this for me? I know that I can set the top right box's left and top border to 0, top right box's right and top border to 0 etc but I will be generating the table dynamically so it makes it harder to do the bottom three cells (still possible though, so I'll do it if I have to).

Thanks

I am using the code shown he http://webdesign.about.com/od/css/a/aa072406.htm

Code:

.container {background:#ccc; color:#fff; margin:0 15px;}
.rtop, .rbottom{
display:block;
background:#fff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#ccc;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}

Code:

<div class="container">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
CONTENTS GOES HERE
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
</div>

the code works ok, but i would like it tweaked so the text is not so close the the egdes, the top and bottom seems ok but it is the left and right margins that are too close to the edges, can these inner margins be increased so the text is not so close?

thanks in advance for your help