Solved

Any way to use CSS to suppress empty container elements?

Posted on 2010-08-27
2
390 Views
Last Modified: 2012-05-10
Is there any way to use CSS / HTML to suppress empty container elements? For example if I have:
<p>Title</p>
<p>Author</p>
<p></p>
<p>Length</p>

Open in new window

where the the third paragraph would normally contain a description, is there any way to hide / suppress / not display the extra white space padding the empty third paragraph will introduce?

Thanks in advance.
0
Comment
Question by:ZekeLA
2 Comments
 
LVL 6

Accepted Solution

by:
stilliard earned 250 total points
ID: 33546880
Yep, there is a CSS3 pseudo selector for empty elements, so you can use this to hide the empty elements.

e.g.
<style>
p:empty { display: none; }
</style>

the problem is its browser compatibility, as shown on this first refference link.

References:
http://reference.sitepoint.com/css/pseudoclass-empty
http://www.w3.org/TR/css3-selectors/#empty-pseudo

You could create a simple bit of javascript to fix this though in unsupported browsers.
Found an example of this here: http://www.webmasterworld.com/css/3944510.htm
0
 
LVL 1

Author Closing Comment

by:ZekeLA
ID: 33547179
Since this is for a mobile browser, I don't want to worry about whether or not it's supported. But thank you for the definitive answer.
0

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question