фоновое изображение исчезает, когда относительное положение используется в Firefox

Question

Поэтому я пытаюсь добавить значок в верхнем правом углу сайта, над которым я работаю. z-index работает, чтобы плавать объект над содержимым страницы, но каждый раз, когда я пытаюсь использовать положение относительно фонового изображения, исчезает только абсолютное положение изображения. Я не хочу использовать абсолют, так как изображение должно располагаться с правой стороны строки меню сайтов, а не с правой стороны окна просмотра.

Любые мысли или советы приветствуются

<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

, если вы не сделаете display: block для этого класса .badge, многие из определенных вами стилей не вступят в силу, поскольку по умолчанию они встроены. Может быть, это все, что вам нужно для начала.

Я не уверен, какого эффекта вы пытаетесь достичь. Вы можете опубликовать png / jpeg макета?