Solved

Any way to use CSS to suppress empty container elements?

Posted on 2010-08-27
2
371 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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Tableau and Javascript: How to export an array to excel with formatting 11 59
Remove greater than sign 3 43
CSS z-index issue 3 20
send keys not working in vba 7 38
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This video teaches users how to migrate an existing Wordpress website to a new domain.

911 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now