ansaurus

Question

Background of empty element used by following element in IE

Answer 1

+1 A:

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?

nickf 2008-11-14 05:53:00

Although in this case I could easily add code to remove one empty element, I am interested in solving the general problem in a web application... where I think it would be necessary to check whole hierachies of elements as to whether they contained any non-whitespace before outputing the tree

John Rees 2008-11-15 03:40:13

Nice example, but if you change the Unstyled element to an h1 you'll see that the red background is the whole height of the h1 element. Seems like it can't decide whether it's rendering the h1 or the previous element... try to minimise and maximise the browser to see it get even more confused!

John Rees 2008-11-15 03:51:46

Answer 2

A:

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

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

Except no space after the ampersand...

Gordon Bell 2008-11-14 05:53:13

that will make it draw an "empty" red box - he said the desired behaviour was that of Firefox which is that nothing get drawn at all.

nickf 2008-11-14 06:02:42

Answer 3

+1 A:

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"&gt;

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.

Josh 2008-11-16 00:33:35

I omitted the doctype from the question as I didn't want to clutter the example, but I guess that back-fired! Sorry. I have actually tried it both with strict.dtd and xhtml1-transitional.dtd, and the behaviour is unchanged.

John Rees 2008-11-17 00:41:28

Answer 4

+1 A:

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.

Peter Boughton 2008-11-16 00:34:32

I agree the output is cleaner without empty paragraphs, but I posted the question because I wanted a workaround that doesn't involve checking whether an element is empty before outputting, especially since my html with empty elements is completely "valid". I agree your workaround is the best yet.

John Rees 2008-11-17 00:54:08

Answer 5

A:

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>

John Rees 2008-11-17 01:06:50

ansaurus

tags:

views:

answers:

Background of empty element used by following element in IE

related questions