0

I have a Wordpress Website and in a Theme I load some Data: if the div.description is empty, the height of description should be 0. But it's not working. Here is the Code how it's shown in the Browser: maybe is not considered as empty? (PS: Using SASS

.one-project {
  .description {
    height: 0;
}

&:hover {
  .description {
    height: 50px;
   }
 .description:empty {
    height: 0px;
  }
}

This is the output in the Browser:
<div class="one-project">
  <div class="details">
    <div class="title">My Title</div>
      <div class="description"/>
  </div>
</div>

This is how it is in my Template (Wordpress)

<div class="description">
<?php
 $shortexcerpt = get_field( 'excerpt' );
echo ($shortexcerpt ? $shortexcerpt: '');
?>
 </div>
parvaneh
  • 99
  • 1
  • 13
  • 2
    This HTML `
    ` is wrong open and close the div tag fully. i.e. `
    `     – omukiguy Feb 21 '18 at 13:26
  • 4
    why u r using self closing div `
    `....??     – Tushar Acharekar Feb 21 '18 at 13:26
  • I just updated the example, since the html code is the browser's output. In the Template there is a closing tag – parvaneh Feb 21 '18 at 13:33
  • 1
    Why not just checking if the value is not empty, and then output the element to the DOM? Something like `
    ` Doing this will allow you to just set a default style that is not depended on the content of the element     – Alon Eitan Feb 21 '18 at 13:40
  • So there are now styles allowed for the div to be completely empty? I have no padding, but I have margin, display, line-height, font-size, opacity. – parvaneh Feb 21 '18 at 13:41
  • I did what Alon said, it still print's out /> not even thought it should... but: :empty works now! Strange! – parvaneh Feb 21 '18 at 13:46
  • So it works now, which is good! But there must be something else that you're missing out as it definitely should not make a div a self-closing element. Perhaps you're outputting some HTML from your DB? Because the code that you posted in the question should work – Alon Eitan Feb 21 '18 at 13:50
  • So, the Problem was, that i had a break in my code. I put everything in one line. The div and the php - not it works! AND I just looked in the firebug - not in the sourcecode - in the sourcecode it is :) – parvaneh Feb 21 '18 at 13:55
  • @Paulie_D: Padding is a layout/CSS thing, not a content/HTML thing, and doesn't affect whether an element matches :empty. This has less to do with :empty and more to do with />. – BoltClock Feb 21 '18 at 14:05
  • @parvaneh Off topic, but what version of Firefox are you using? Firebug no longer works in the latest one. _View Selection Source_ and _Inspect Element_ both say `
    ` though.     – Mr Lister Feb 21 '18 at 14:14

0 Answers0