CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jammer
Jammer

Reputation: 10208

Div Content Not Appear

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/

Upvotes: 0

Views: 92

Answers (3)

user3507600
user3507600

Reputation: 1075

Not sure of the exact reason, but it appears that the formatting of your font-size is not working as intended. With the example that you linked, if you simply change the font-size of the noticount class from em based to px based it seems to fix the issue.

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

JSFiddle

Edit:

Based on my second comment below, I investigated the issue further. As this JSFiddle shows, you can keep .noticount's font-size relative if you remove the font-size: 0; from both ul#moomenu and ul#moomenu li. I'm not sure what the purpose of setting those to 0, but given you use px (instead of em) on ul#moomenu a and ul#moomenu ul a I'd suggest using my first suggested fix as it's consistent with the other font-sizes you set in your css.

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

Your ul#moomenu and ul#moomenu li define font-size:0

Since the .noticount has font-size:0.6em, the resulting font size is... 0

A font size of zero is invisible.

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

Make sure the parent of.noticounthas a relativeposition that will fixe the problem

.noticountParent{
     position:relative;
}

.noticount{
     position:absolute;
}

Html:

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

Upvotes: 0

Related Questions