background image disappears when position relative used in firefox

Question

So I'm trying to add a badge to the top right corner of a site I'm doing some work on. z-index works to float the object above the page content but each time i try to use position relative the background image disappears only position absolute shows the image. I don't really want to use absolute as the image needs to be positioned on the right hand side of the sites menu bar not the right hand side of the viewport.

Any thoughts or advice appreciated

<div class="badge-box">
<a href="http://www.google.com" class="badge">Book Now!</a>
</div>

<div id="header">
<a href="index.php"><img src="images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" /></a>
</div>

<div id="main-menu">
<div>
<a href="/">Home</a>
<a href="/cottages.php">Our Cottages</a>
<a href="/gwynfryn.php">Bed &amp; Breakfast</a>
<a href="/rates.php">Price Guide</a>
<a href="/llanbedr.php">Location &amp; Local Attractions</a>
<a href="/news.php">News &amp; Special Offers</a>
<a href="/contact.php">Contact Us</a>
</div>
</div>

.badge-box {
    width: 1030px;
    margin-left: auto;
    margin-right: auto;
    border: 0px solid red;
}

.badge {
    background: url(../images/badge.png) 0px 0px no-repeat;
    width: 148px;
    height: 148px;
    text-indent: -10000px;
    position: relative;
    z-index: 999;
}

#header {
    width: 960px;
    height: 40px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
    padding: 20px 0px 0px 20px;
    background: #58564f url(../images/header-top-background.png);
}

#main-menu {
    width: 980px;
    margin-left: auto;
    margin-right: auto;
    height: 35px;
    /*background: red;*/
    background: #58564f url(../images/header-bottom-background.png);
    font-family: Georgia, "Times New Roman", Times, serif;
}

#main-menu div {
    width: 776px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    background: blue;
}

#main-menu div a {
    display: block;
    float: left;
    padding: 5px 10px 0px 10px;
    height: 30px;
    color: #FFFFFF;
    font-size: 1.2em;
    text-align: center;
    background:  green;
}

#main-menu div a:hover {
    background-color: #333333;
}

Answer 1

unless you do a display:block on that .badge class, a lot of the styles you have defined won't take effect as it defaults to inline. maybe that is all you need to get started.

i am not sure what is the effect you are trying to achieve. can you post a png/jpeg of the mock-up?