Background problem with scrollable div

elmu · 06-05-2007, 04:16 PM

Hello,

I have a small html code below. My problem is that in IE the background color and border is as long as the text but in Firefox and Opera it is only as long as the scrollbar.

How can I correct it to be similar as in IE?

Thanks!

Code:

<html>
<head>
<style type="text/css">
#content
{
   background-color:#FFF;
   width:400px;
   overflow: auto
}

#text
{
   background-color:#00FFFF;
}

pre {
   color: #000066;
   border: 1px solid #d0d0d0;
   background-color: #f0f0f0;
}

</style>
</head>

<body>

<div id="content">
<div id="text">
<pre>
  <span>This is a quite long row but the background color and border is not correct.</span>
</pre>
</div>
</div>
</body>

</html>

koyama · 06-05-2007, 06:46 PM

Quote:

Originally Posted by elmu

My problem is that in IE the background color and border is as long as the text but in Firefox and Opera it is only as long as the scrollbar.

How can I correct it to be similar as in IE?

Ironically, Firefox and Opera are rendering your page correctly. It is IE6 that is rendering incorrectly. Why? To learn more read this: Internet Explorer and the Expanding Box Problem [fixed in IE7]

Recall that the pre element is initially block-level (and non-floated). Its width is therefore determined by the width of its container. Therefore the background and border is not extending to the width of the text. To get it to expand, you could for example float it.

Really you should probably not be using the pre element. It is a stylistic element.

Here is an example of what you can do:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html lang="en">
	<head>
	<title>CF 115680</title>
	<style type="text/css">
	html {
		font-size: 100%;
		font-family: 'Courier New', Courier, monospace;
	}
	#content {
		width: 400px;
		height: 80px;
		overflow: auto;
	}
	#long-text {
		float: left;
		color: black;
		background: yellow;
		border: 5px solid green;
		white-space: nowrap;
	}
	</style>
	</head>
	<body>
	<div id="content">
		<div id="long-text">This is a quite long row and the background color and border is correct.</div>
	</div>
	</body>
</html>

As a side issue, you should probably always specify a document type like in my example. Otherwise your page will be rendered in quirks mode.

Arbitrator · 06-05-2007, 07:11 PM

Yeah, I know that koyama beat me to the punch.

Quote:

Originally Posted by elmu

I have a small html code below. My problem is that in IE the background color and border is as long as the text but in Firefox and Opera it is only as long as the scrollbar.

How can I correct it to be similar as in IE?

With respect to your code, it is actually Firefox and Opera that are rendering your code correctly. I believe that this is because those browsers are generating an anonymous inline box. A live example demonstrates the process.

The solutions are to either make the pre element an inline element via display: inline or to replace that element with an inline element. For the latter solution, you could throw out the pre element and style the span element instead.

Solution A:

Code:

pre { display: inline; }

Solution B:

Code:

/* Remove the “pre” element. */
*#text span {
	border: 1px solid #d0d0d0;
	background: #f0f0f0;
	color: #006;
	white-space: pre; /* Duplicate the effect of the “pre” element. */
}

koyama · 06-05-2007, 09:55 PM

Quote:

Originally Posted by Arbitrator

I believe that this is because those browsers are generating an anonymous inline box. A live example demonstrates the process.

Hmm... I can follow you that the paragraph in your example holds an anonymous inline box, but I'm not sure where you spot those anonymous inline boxes in the OP's example. The text is in a span element so I would think that it wouldn't qualify as an anonymous inline box? But I could be wrong.

Quote:

Originally Posted by Arbitrator

The solutions are to either make the pre element an inline element via display: inline or to replace that element with an inline element.

Yeah, that seems to be working too. The only difference between the inline version and the version using some other element with the shrink-wrap effect (see list by Arbitrator) is that the border/padding of that “pre-formatted” inline element may partially stick out of the container in the inline version. This is probably only a minor concern in this example.

Quote:

Originally Posted by Arbitrator

Solution B:

Code:

/* Remove the “pre” element. */
*#text span {
	border: 1px solid #d0d0d0;
	background: #f0f0f0;
	color: #006;
	white-space: pre; /* Duplicate the effect of the “pre” element. */
}

Did you notice that it isn't working in IE6 and IE7? At first I thought that it was IE that didn't support white-space: pre. But this couldn't be true because it does support it, at least partially.

I didn't know that there were bugs related to white-space: pre in IE, but there seem to be problems. I haven't seen it mentioned though. I will have to dig into it.

white-space: pre problem in IE6 and IE7: Live example

Arbitrator · 06-05-2007, 11:05 PM

Quote:

Originally Posted by koyama

Hmm... I can follow you that the paragraph in your example holds an anonymous inline box, but I'm not sure where you spot those anonymous inline boxes in the OP's example. The text is in a span element so I would think that it wouldn't qualify as an anonymous inline box? But I could be wrong.

Yeah, my mistake. I think that there may be anonymous inline boxes before and after the span element, but those wouldn’t be relevant. In the case of elmu’s code, the span element would be equivalent to the anonymous inline box, however, so the basic explanation that I provided is still relevant. (I think, anyway.)

Quote:

Originally Posted by koyama

Yeah, that seems to be working too. The only difference between the inline version and the version using some other element with the shrink-wrap effect (see list by Arbitrator) is that the border/padding of that “pre-formatted” inline element may partially stick out of the container in the inline version. This is probably only a minor concern in this example.

I’m not quite sure what you mean. I guess that you’re referring to the top and bottom borders being drawn out of view as shown in Firefox in my “Solution A”.

I do notice something weird though. When I apply Solution A, Firefox kills the line breaks before and after the span and Opera only kills it before and reveals the background of #text. I’m also wondering why the background of #text and the pre element aren’t being drawn behind the areas above and below the text before display: inline was applied; the background properties are not inherited and those elements should contain the blank lines above and below the text…

When I apply “Solution B”, the I see the rendering of Firefox for Solution A in both Firefox and Opera.

And, as you mentioned, Internet Explorer 7 fails and wraps the line for both solutions.

Now, if I try a new solution, that I’ll call “Solution C” that involves removing both the pre and span elements and apply the following style rule:

Code:

*#text {
	display: inline;
	border: 1px solid #d0d0d0;
	background: #f0f0f0;
	color: #006;
	white-space: pre; /* Duplicate the effect of the “pre” element. */
}

… then I get preservation of the line breaks before and after the text, as I had originally expected, in Firefox and Opera. The borders are drawn weirdly though. And, this time, Internet Explorer 7 renders a scrollbar to nowhere.

Quote:

Originally Posted by koyama

Did you notice that it isn't working in IE6 and IE7? At first I thought that it was IE that didn't support white-space: pre. But this couldn't be true because it does support it, at least partially.

I didn’t until now. I didn’t check anything but my own example in Internet Explorer prior to my last post. I didn’t even try Solution A or B before I posted them; I assumed that they would work based upon my live example, but I forgot to consider bugs and other weirdness.

Quote:

Originally Posted by koyama

I didn't know that there were bugs related to white-space: pre in IE, but there seem to be problems. I haven't seen it mentioned though. I will have to dig into it.

Yes, enough to give me a headache for now. I think that I’ll take a break and research the weirdness above later.

koyama · 06-07-2007, 04:19 AM

Quote:

Originally Posted by Arbitrator

I’m not quite sure what you mean. I guess that you’re referring to the top and bottom borders being drawn out of view as shown in Firefox in my “Solution A”.

Yes, that was exactly what I meant.

Quote:

Originally Posted by Arbitrator

I do notice something weird though. When I apply Solution A, Firefox kills the line breaks before and after the span and Opera only kills it before and reveals the background of #text.

I agree, that's weird. At first when I tried to implement your “solution A” in elmu's example I didn't see the effect you were talking about in Opera. Then I realized that there was no doctype. So I added the doctype, and indeed, I saw the effect you mentioned. This also proves—adding to the confusion—that quirks mode in Opera is different.

The effect reminds me somewhat of an earlier discussion we had when we talked about how browsers should render a block-level element nested within a inline element. Although I didn't mention it at that time, I did notice differences between Opera and Firefox when there was nothing between the inline element and the block-level element. It seemed that Opera was creating anonymous inline boxes both before and after the block box while Firefox was only creating an anonymous inline box before the block box. You can check out this example if you want to:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
	<head>
	<title>CF115680-3</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css">
	#inl {
		padding:5px;
		background: lime;
		border: 5px solid green;
	}
	#bl {
		display: block;
		background: yellow;
		border: 5px solid orange;
	}
	</style>
	</head>
	<body>
		<div id="wrap"><span id="inl"><span id="bl">This is a quite weird</span></span></div>
	</body>
</html>

Live example

I don't know whether this is related to the issue that you noticed in “solution A”, I just thought I would mention it. With that said, I don't even know what the specifications say about how user agents should deal with whitespace (or the lack of whitespace) in such situations. This seems to be the core of the problem.

Quote:

Originally Posted by Arbitrator

Yes, enough to give me a headache for now. I think that I’ll take a break and research the weirdness above later.

Me too. Also, I will definitely check out your “solution C” later which sounds interesting. Anyway, at least I think that elmu would have enough options by now to get the effect that he wanted.