Question

I have a div which in which errors will be represented. My problem is that because it has a red border, it will be displayed as an empty line even when the div is empty (there are no errors). I don’t like this behavior; I’d prefer the div to be completely invisible when it is empty.

Also, I don’t want to do that with javascript—is it possible to hide the border when the div is empty only with CSS?

Answer 1

Yes. Here is one possible solution using empty-cells:

CSS

.error {
    display:table-cell;
    empty-cells:hide;
    padding: 10px;
    border: 1px solid red;
}

HTML

<div class="error"><!-- I am empty --></div>
<div class="error">Error'd!</div>

http://jsfiddle.net/At6Sp/