?
Solved

Any way to use CSS to suppress empty container elements?

Posted on 2010-08-27
2
Medium Priority
?
430 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 1000 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

578 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