Seeking guidance on CSS3 and the :empty pseudo-class.
Currently developing a web AJAX application with a sidebar in the layout that I want to hide when empty. Here's what I have:
#my_sidebar:empty { display:none;}
To display it when not empty, I wrote:
#my_sidebar:not(:empty) { display:block; }
It's functioning, but on Chrome, the sidebar only appears after a click on the page or a link. Any ideas why?
Any help would be appreciated! (apologies for any grammar errors!)
EDIT: the HTML page:
<body id='body'>
<!-- Header -->
<header id="top" class="cf">
<div id="branding">
<h1><a href=" " onClick="presenter.homepage()">Project Management</a></h1>
</div>
<nav id="nav-user">
<ul>
<li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
<li><a id="company" href="azienda">Azienda</a></li>
<li><a id="logout" href="logout">Logout</a></li>
</ul>
</nav>
<nav id="nav-main">
<ul class="cf">
<li>
<button id="back" onClick="javascript: history.back();" href="#" />←</button></li>
</ul>
<!--popup con task finiti -->
<div id="task-ended" class="cf">
<div class="triangle-border top">
<div class="clear"></div>
</div>
</div><!--task-ended-->
<!--popup con task finiti -->
</nav>
</header>
<!-- Main Body -->
<div id="container" class="cf">
<div id="loading" style="display:none"><img src="images/loading.gif" /></div>
<div id="my_sidebar" class="sidebar"></div>
<div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">
Mentis Project Management
</footer>
</body>
and CSS:
.sidebar {
float:right;
width: 36%;
text-align:left;
}