Background of empty element used by following element in IE

StackOverflow https://stackoverflow.com/questions/289315

Question

In IE6 the paragraph following the empty paragraph is displayed with the background color of the empty paragraph, which I'm guessing is wrong! It works correctly in Firefox, but I haven't checked IE7.

Is there a CSS solution to this problem, or do I have to remove the empty element?

(I would rather not have to remove empty elements, as that involves writing code to check whether every element is empty before outputting it)

The behaviour is unchanged using either strict or transitional doctypes (added this comment in response to answers)

Interestingly the effect does not occur with text color, only background color.

<html>
<head>
</head>
<body>

  <p style='background-color:green'>Green content</p>
  <p style='background-color:red'>Red content</p>
  <p>Unstyled background working because previous red element is not empty</p>

  <p style='background-color:green'>Green content</p>
  <p style='background-color:red'></p>
  <p>Unstyled background broken because previous red element is empty</p>

  <p style='color:green'>Green content</p>
  <p style='color:red'>Red content</p>
  <p>Unstyled text color working because previous red element is not empty</p>

  <p style='color:green'>Green content</p>
  <p style='color:red'></p>
  <p>Unstyled text color working even though previous red element is empty</p>

</body>
</html>
Was it helpful?

Solution

An empty paragraph is meaningless - which means you're probably writing the wrong HTML.

Also, your example doesn't have a DOCTYPE - a valid DOCTYPE is essential for getting browsers to correctly interpret your code, without one you'll be stuck in quirks mode.

But anyway, the simplest workaround for this bug is simply set a background for your current unstyled element.

OTHER TIPS

I just tested that in IE7 and can confirm that it happens there too.

It looks like the unstyled paragraph does not actually have a red background, it's just that IE7 is drawing the red box for the empty paragraph and then drawing the following paragraph over the top.

You can see this for yourself by trying this code:

<p style='background-color:green'>Green content</p>
<p style='background-color:red; margin-left:50px'></p>
<p>Unstyled background broken because previous red element is empty</p>

You should see that the red paragraph is 50px in from the left.

Why it's doing this is anyone's guess. Adding some code to check if the paragraph is going to be empty isn't too hard, plus it removes useless markup from your output and avoids this problem altogether. Give that a go?

Try putting a non-breaking space in your empty paragraphs...

<p style='color:red'>& nbsp;</p>

Except no space after the ampersand...

Add a doctype to the top of your HTML file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

That will force IE6 to switch form quirks to standards mode. This brings a lot of tother advantages, like a correct box model, so you should be doing it anyway.

One strange workaround I found was to add position:relative to the potentially empty paragraphs like this:

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top