css dock menu (fisheye) rounded edges?

css dock menu (fisheye) rounded edges?

Hi, im using the css dock menu found here: http://www.ndesign-studio.com/blog/css-dock-menu

But i have a problem i cant figure out. I wan't to have rounded corners on the left and right side of the container, i have made the images for it but i cant rly get it to work. I think its a css problem, anyone have an idea?

Code:

html:
  1. <div class="dock" id="dock2">

    <div class="dock-container2">
      <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
    </div>


    <!--dock menu JS options -->
    <script type="text/javascript">
       
        $(document).ready(
            function()
            {
                $('#dock2').Fisheye(
                    {
                        maxWidth: 60,
                        items: 'a',
                        itemsText: 'span',
                        container: '.dock-container2',
                        itemWidth: 40,
                        proximity: 80,
                        alignment : 'left',
                        valign: 'bottom',
                        halign : 'center'
                    }
                )
            }
        );

    </script>




























css:
  1. /* dock2 - bottom */
    #dock2 {
        width: 100%;
        bottom: 0px;
        position: absolute;
        left: 0px;
    }

    .dock-container2 {
        position: absolute;
        height: 50px;
        background: url(../images/dock-bg3.gif);
        padding-left: 20px;
    }
    a.dock-item2 {
        display: block;
        font: bold 12px Arial, Helvetica, sans-serif;
        width: 40px;
        color: #000;
        bottom: 0px;
        position: absolute;
        text-align: center;
        text-decoration: none;
    }
    .dock-item2 span {
        display: none;
        padding-left: 20px;
    }
    .dock-item2 img {
        border: none;
        margin: 5px 10px 0px;
        width: 100%;
    }































I was trying to do something like this with no good results:

css:
  1. #dock2 {
        width: 100%;
        bottom: 0px;
        position: absolute;
        left: 0px;
    }

    .dock-container-left {
        padding: 0 0px;
        float: left;
        background: url(../images/dock-bg-left.gif);
        background-position:left;
    }

    .dock-container-right {
        padding: 0 0px;
        float: right;
        background: url(../images/dock-bg-right.gif);
        background-position:right;
    }

    .dock-container2 {




















html:
  1. <div class="dock" id="dock2">

    <div class"dock-container-left"></div>

    <div class="dock-container2">
      <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>

    <div class"dock-container-right"></div>

    </div>








and it only ends up the left-image is repeating.
Don't know if it is a function problem or a css/div problem, so would really appreciate any help.

cheers