I have a menu that under certain circumstance some items show a little red box (think facebook friend count).

I've recently redone the css targetting the menu but nothing should have changed to cause the problem I'm seeing.

It's a simple div like this:

```
<div id="request-count" class="noticount"></div>

```

The CSS looks like:

```
.noticount {
    background: none repeat scroll 0 0 #E43C03;
    color: #FFFFFF;
    font-size: 0.6em;
    font-weight: bold;
    position: absolute;
    top: 3px;
    left: 3px;
    text-align: center;
}

```

I've checked the page sounce and my javascript is correctly setting the value so the div ends up looking like this:

```
<div id="request-count" class="noticount">1</div>

```

The only way I can get this to actually show up is by manually hacking the live CSS and setting the Width and Height, then it shows up without a problem.

The **really** odd bit is that the content "1" never shows in the div either. Very confused over this and really don't know what to try.

Not sure if this is significant or an oddity with FireBug but sometimes this div appears in the code view slightly tranparanent which usually disnifies that an element is `display:none` which I'm not getting either.

What can I try to solve this?

**EDIT**

Here is a fiddle displaying the problem:

<http://jsfiddle.net/UYa5Z/>