Css display: none works half way - css

Question

I have following css and display is set to none if there are no records. However, it displays a red line at the top. You can verify it here http://jsfiddle.net/3agn58u4. Any idea what is causing this?
CSS:
<style>
body {
font-family:Calibri;
}
#customTaskNotification {
position:relative;
}
.TasksCount {
position:absolute;
top: -.1px;
right:-.1px;
padding:1px 2px 1px 2px;
background-color:#ff0000; /* orange #ef8913* dark-pink #d06079 */
color:white;
font-weight:bold;
font-size:1.05em;
width:50%;
text-align: center;
border-radius:50%!important;
box-shadow:1px 1px 1px gray;
}
div.TasksCount:empty {
display: none;
}
</style>

Answer 1

The problem is that you're trying to set CSS styling on a property based on it being empty but that div is not actually empty.
You can see in the snippet provided that the :empty selector is not going to apply to a <div> element that isn't actually empty (even if you can't see its contents).
.testDiv {
background-color:#ff0000;
height: 30px;
width: 40px;
margin: 5px;
}
.testDiv:empty {
background-color: blue;
}
<div class="testDiv">
</div>
<div class="testDiv"></div>
<div class="testDiv">
</div>
You may need Javascript to check actual content of a div before applying styles if this case is going to be prevalent in your solution.
You can change the padding of your <div> and yes, that will hide it from your view when the contents of the div aren't visible, but you're also removing the padding from your <div> so it's likely going to look bad (or not as desired) when there are actual links inside the div.

Answer 2

The :empty pseudo selector will select elements that
contain nothing
or every element that has no children (including text nodes).
or matches element that is empty but has only html comments.
Example:
<p></p><!-- empty element -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p><!-- test --></p><!-- empty element with comment -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p><a></a></p><!-- element has no text,but has child nodes,hence not empty -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p> </p><!-- element has space ,hence not empty -->
please see the fiddle:EMPTY ELEMENT
This is the reason why your display none is not working.

Answer 3

According to w3school:
The :empty selector matches every element that has no children
(including text nodes).
TasksCount is not empty because it has a child(a element) so display:none; does not effect. By css, it is not possible to check the child where is empty or not and then select parent.
Solution: use Javascript or Jquery.
if($('.TasksCount').find('a').html() == ''){
//Or you can add class or add style $('.TasksCount').css('display','none');
$('.TasksCount').hide();
}

Answer 4

That's because TasksCount background color is set to red. You can set the padding:0 if you want to keep the same color. Or,
.TasksCount {
background-color: #fff;
box-shadow: none;
}
EDIT
This answer has been downvoted multiple times because it does not answer the real question :
Why the :empty property is not taking effect.
As others pointed out, this CSS property matches only elements that have no children. This is the correct answer to this question.
The OP asked
"However, it displays a red line at the top. You can verify it here
... Any idea what is causing this?"
I missed the point about the empty property and did suggested first to remove the padding which partially solves the 'red line' when the DIV and its children are empty. However, this will also strip the padding from the element when it has content.
If you think you have a more complete answer to this question , please leave a comment below and I will update it accordingly.