...

View Full Version : 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!


<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
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 (http://www.positioniseverything.net/explorer/expandingboxbug.html) [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:


<!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 (http://www.quirksmode.org/css/quirksmode.html).

Arbitrator
06-05-2007, 07:11 PM
Yeah, I know that koyama beat me to the punch.


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 (http://www.w3.org/TR/CSS21/visuren.html#anonymous). A live example (http://www.jsgp.us/demos/CF115680.html) 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:

pre { display: inline; }

Solution B:

/* 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
I believe that this is because those browsers are generating an anonymous inline box (http://www.w3.org/TR/CSS21/visuren.html#anonymous). A live example (http://www.jsgp.us/demos/CF115680.html) 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.

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 (http://www.codingforums.com/showpost.php?p=563266&postcount=9)) 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.

Solution B:

/* 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 (http://koyama.dk/demos/CF115680_2/CF115680_2.html)

Arbitrator
06-05-2007, 11:05 PM
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.)


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 (http://www.codingforums.com/showpost.php?p=563266&postcount=9)) 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:


*#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.


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.


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
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.

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:


<!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 (http://koyama.dk/demos/CF115680_3/CF115680_3.html)

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.


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum