On a div I have css set:
div.class {border: 1px solid red;}
The div is positioned absolutely in the center of the page. The problem is that the border appears even if there is no content.
Any css methods to get the border to not appear if there is no content?
To make an invisible border, set the BORDER attribute to 0. (Although most browsers default to a table border of 0, specifically stating it ensures that the border will be invisible in all browsers.)
Go to Design > Page Borders. In the Borders and Shading box, on the Page Border tab, select the arrow next to Apply to and choose the page (or pages) you want to remove the border from. Under Setting, select None, and then select OK.
You usually use padding to add distance between a border and a content. However, background are spread on padding. You can still do it with nested element.
CSS3 has a selector defined for this case. It does not work in IE8 and lower though.
div.class:empty { border: none; }
Your best option would be to tweak this on the server side, and simply don't display that div if it would be empty.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With