CODEWITHSUNDEEP
css
Serafeim
Serafeim

Reputation: 15104

Empty div with red border is visible as a red line - can I hide it only with CSS?

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?

Upvotes: 1

Views: 10271

Answers (3)

Interrobang
Interrobang

Reputation: 17434

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/

Upvotes: 10

Shawn Taylor
Shawn Taylor

Reputation: 3969

BEST way is to control it from server side and DON'T display if its empty. Otherwise you can use :empty selector but its support in IE is not solid.

And yes, if you use jquery then you'll be fine.

$(document).ready(function() { $('div:empty').remove(); });

Upvotes: 3

Joseph
Joseph

Reputation: 119867

check out this CSS3 pseudoclass :empty

​div{
    border:1px solid red
}

div:empty{
    display:none
}

http://jsfiddle.net/nWRJb/1/

Upvotes: 11

Related Questions