So, I was messing with CSS for my buttons and tried to test the following CSS code on the button element:

```
button {
    width:85px;
    height:29px;
    background-color:#800080;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
}

```

The 2 buttons at the end are created by this HTML:

```
<div id="header">
    <div id="logo"><img src="logo.jpg" /></div>
    <div id="search">
        <form id="search-form">
            <input type="text" style="width:80%;height:28px;background-color:#F5F5F5;font-size:16px;position:relative;top:-3px;"/>
            <button type="button" style="position:relative;top:6px;"><img src="mgt.jpg" /></button>
        </form>
    </div>
    <div id="upload" class="top-button"><button>Upload</button></div>
    <div id="signin" class="top-button"><button>Sign in</button></div>
</div>

```

Last 2 buttons "upload" and "signin" are the ones n question.

and the result:

![Buttons with weird purple box under them](https://i.stack.imgur.com/d2El0.png)

As viewed in Firefox. Any ideas what is causing this?