Solved

Any way to use CSS to suppress empty container elements?

Posted on 2010-08-27
2
400 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

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

Suggested Solutions

Title # Comments Views Activity
Help with mod_substitute 18 45
Why is my $_POST not going to results page 10 42
Table header must be on top 2 31
Execute jQuery after Function 4 14
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn how to count occurrences of each item in an array.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

730 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