Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Background problem with scrollable div

    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>

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by elmu View Post
    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.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Yeah, I know that koyama beat me to the punch.

    Quote Originally Posted by elmu View Post
    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. */
    }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Arbitrator View Post
    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 View Post
    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 View Post
    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

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,305
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by koyama View Post
    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 View Post
    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 View Post
    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 View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Arbitrator View Post
    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 View Post
    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 View Post
    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.
    Last edited by koyama; 06-07-2007 at 04:23 AM. Reason: error in code


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •