Clever Geek Handbook

Empty element background used by next element in IE

In IE6, the paragraph following the blank paragraph is displayed with the background color of the blank paragraph, which I assume is wrong! It works correctly in Firefox, but I haven't tested IE7.

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

(I would prefer not to remove empty elements as it requires writing code to check if all are empty before printing it out)

Behavior does not change using strict or transient doctics (added this comment in response to answers)

Interestingly, the effect does not occur with the text color, only the 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>
0


source to share


5 answers


A blank paragraph is meaningless - it means you are probably writing incorrect HTML.

Also, your example does not have a DOCTYPE - a valid DOCTYPE is required for browsers to interpret your code correctly, without it you will be stuck in quirks mode.



But anyway, the simplest workaround for this error is to simply set a background for your current unleaded item.

+1


source


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

It looks like the unpinned paragraph does n't actually have a red background, it's just that IE7 draws a red box for the empty paragraph and then draws the next paragraph on top.

You can see it 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 to the left.

Why he does this, everyone can guess. Adding some code to check if a paragraph is going to be empty isn't too hard, plus it removes useless markup from your output and avoids the problem altogether. Let it go?

+1


source


Try putting non-breaking space in your blank paragraphs ...

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

Except for the space after the ampersand ...

+1


source


Add the 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">

This will force IE6 to switch forms to standards mode. This brings many benefits, such as the correct box model, so you should still do it.

+1


source


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

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
0


source






More articles:


All Articles