Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Stuctural Pseudo-Classes (:empty) 1

Status
Not open for further replies.

maanton

Programmer
Mar 27, 2005
52
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:
Code:
h3:empty{
visibility:hidden
}
but unluckily, it works only in ff...

Any suggestions?

Thanks in advance,
Martha
 
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:
Code:
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. . .)
 
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...
 
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:
Code:
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!
 
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!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top