css - small image but the there's an "imaginary box" seen in firebug that stops me using a link?

I'm fairly new to css, sorry!

I have a site that is not up yet but it has a menu bar at the top of the page and below that a box with some text in, on the top left corner of that box there's a rosette. When I view the site with firebug on lower res screens the rosette which is only 50x100px covers a much larged area stopping me from clicking on the menu link.

The box with the text in has it's own div,textbox

#textbox
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px开发者_如何转开发;
width: 470px;
text-align: left;
padding-bottom: 5px;
padding-left: 35px;
padding-right: 5px;
padding-top: 5px;
border-collapse: collapse;
border: 1px solid #ffffff;
background-image:url("../images/50.png");
}

The rosette also has it's own div, rosettepb

   #rosettePB {
    background-image:url("../images/rosette.png");
    -webkit-transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
    background-position: center center;
    background-repeat: no-repeat;
    height: 180px;
    margin: -140px;
    position: absolute;
    top: 254px;
    width: 390px;
    z-index: 151;
    }

How do I get that box to be only 50x100px and thus not block that menu link?

Thanks,

You have specified the width and height for the box to be 390x180, so that's what it is. If you change it to 50x100, it will be smaller:

#rosettePB {
    background-image:url("../images/rosette.png");
    -webkit-transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
    background-position: center center;
    background-repeat: no-repeat;
    width: 50px;
    height: 100px;
    margin: -140px;
    /*  position: absolute; */
    left: 30px;
    top: 344px;
    z-index: 151;
}

Edit:

As the background image is centered, you have to move the element to make the image appear at the same position. I adjusted the top positon, added a left positon and commented out the margin, as what I think would place the element correctly.

You need to adjust your z-indexes. z-index:151; is a really high z-index and is probably sitting above your nav. Either lower that number or give your nav a higher z-index than the rosette:

#nav {
    position:relative;
    z-index:152;
}