Stuctural Pseudo-Classes (:empty) 1

[maanton]

Hi all !!
I m dealing with a dynamic page and I need an element (eg h1) to be invisible when it does not contain any data.

I tried using the following Stuctural Pseudo-Class:

h3:empty{
visibility:hidden
}

but unluckily, it works only in ff...

Any suggestions?

Thanks in advance,
Martha

 

[rpgfan3233]

AFAIK, that's a CSS3 pseudo-class only. Also, 'visibility' only hides the content, not the space it takes up. 'display' hides the space too.

This is for Internet Explorer:

h3 {
display: expression(this.innerHTML.length > 0 ? 'block' : 'none');
}

Basically, if there is content, there should be at least one character between "<h3>" and "</h3>", which means the length of the content should be at least 1. Because h3 is a block element, it is set to "block" if there is content. Otherwise, it is set to "none".

I see no point in using :empty because Firefox automatically hides elements with no content and Internet Explorer doesn't understand it. The above code eliminates the usefulness of :empty for right now (until IE supports it. . .)

 

[maanton]

To style h3 I use borders which are displayed (produce lines) even if there is no content...
One solution is to style my header without using border properties, but I like the current style very much...

 

[rpgfan3233]

Adding that display: block|none in there should help fix that in IE. I never would have thought about using :empty with borders. Anyway, here are the entries I had:

h3:empty { /* for browsers that understand this */
display: none; /* hide the element if there is no content */
}

h3 {
display: expression(this.innerHTML.length == 0 ? 'none' : 'block'); /* for IE to show or hide the block */
border-color: #00f;
border-width: 1px;
border-style: solid;
}

Just example code, but that should be adaptable to your page(s), right? I hope it works for you!

 

[maanton]

Thank you very very much, it worked both on ff and ie.
It does not work on opera, but I don t mind...thanks again!