#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12

    CSS NS Div background problem:


    Ok I have a two column layout, because of limitations set on the structure of the pages html (don't ask) the only way I could figure out of making the two columns both (visually) the same height (as their content will vary dynamically) is to do the following fudge - to put the background column images as the background to a container div which then I put the columns into:

    Code:
    #container {
    	width: 620px;
    	background: scroll url(<cfoutput>#path#</cfoutput>two_cols_bg.gif) repeat-y 2px 0px;
    }
    
    #left-column {
    	padding-left: 2px;
    	width: 178px;
    	float: left;	
    }
    
    #right-column {
    	width: 440px;
    	float: right;
    }
    
    <!-- two main column container box -->
    	<div id="container" name="container">
    <!-- start left (search) column -->
    		<div id="left-column" name="left-column">
                                                 content
                                    </div>
                                    <div id="right-column" name="right-column">
                                                 content
                                    </div>
                       </div>
    This works fine in IE (5.5 at least anyway) but netscape the background doesn't show through (even if I set the left & right column backgrounds manually to their default of transparent).

    However the background does show up if I put some content directly into the container div, but only for the lines where content is there - it still doesn't show up behind either of the column divs.

    Any ideas?

    Also I'm using the name="" attribute as I'm sure I remember reading that some versions of NS don't like the id="" attribute and use name="" instead, but I can't find clarification on this.

    Thanks in advance.

    -D
  2. #2
  3. Moderator Emeritus
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Austin, TX
    Posts
    7,188
    Rep Power
    2265
    Please specify the version of Netscape that you're having this problem with.

    Also, a link to your site where the issue could be viewed in several browsers would be helpful.
    DrGroove, Devshed Moderator | New to Devshed? Read the User Guide | Connect with me on LinkedIn
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    Its occuring in NS 7.1, it's not online at the moment I'm afraid.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    No worries, I've managed to balance out the column lengths perfectly using a simple bit of javascript.

    Although if anyone figures out whats causing the above problem I would love to know as its been confusing the hell outta me for a couple of hours today.

    -D
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    1
    Rep Power
    0

    Unhappy Finally!


    I wish someone would reply to this, because I am struggling with EXACTLY that problem right now.

    I have two divs within a container div; the background for the container div will not show up where the other two divs are, though it shows up at the top (i'm assuming it's where the padding of the div container is).

    the css file is here:
    http://sweet-akari.net/blog/shiny.css

    and the page is here:
    http://sweet-akari.net/blog/blog.html

    (Edit) I'm using IE 6.0... I notice the person up above is having this problem with Netscape.

    ....help?


    Julie
    Last edited by sweet-akari; April 2nd, 2004 at 01:26 AM. Reason: Forgot something...
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    You're positioning the two main columns absolutly I notice... that means that they are removed from the flow of the HTML and placed on top... thus they will never make the container element any larger as is needed... try floating these instead.

    This will fix it for IE, Opera etc. but may need further tweaks for Mozilla browsers.

    -D
  12. #7
  13. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    Originally Posted by DEfusion
    You're positioning the two main columns absolutly I notice... that means that they are removed from the flow of the HTML and placed on top... thus they will never make the container element any larger as is needed... try floating these instead.

    This will fix it for IE, Opera etc. but may need further tweaks for Mozilla browsers.
    -D
    Actually, it fixes for IE et al because they don't read the standards correctly. IE (and perhaps Opera) expand the container to, um, contain its content. Properly, oversized content should break out of its container. A floated element does not occupy space in its container, and should also break out. See /*PIE*/ for a good explanation.

    This little demo will illustrate the point. Look at it in Moz/NS to see it right, then in IE to see it wrong.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type"
        content="text/html; charset=iso-8859-1" />
    
        <title>float demo</title>
      </head>
    
      <body>
        <h1>Float Demo</h1>
    
        <div
        style="position:relative; width: 175px; border:2px solid black; background-color:#eee;">
          <div
          style="float:left; width:75px; border:1px solid red; padding:5px; margin-right:5px; background-color:#fdd;">
            <p>Now is the time for all good men to come to the aid of their country.</p>
          </div>
          <!-- end float -->
    
          <p>er, um&hellip;</p>
        </div>
    
        <div
        style="position:relative; width: 175px; border:2px solid black; margin-left:94px; margin-top:5px; background-color:#eee;">
          <div
          style="float:left; width:75px; border:1px solid red; padding:5px; margin-right:5px; background-color:#fdd;">
            <p>Now is the time for all good men to come to the aid of their country.</p>
          </div>
          <!-- end float -->
    
          <p>er, um&hellip;</p>
    
          <p>We clear the float to drive the div height.</p>
    
          <!--
          This next paragraph, with the rule "clear: both;" drives the
                bottom of the div down to the bottom of the float.
          -->
    
          <p style="clear:both; height:0px; overflow:hidden;">&nbsp;X</p>
        </div>
      </body>
    </html>
    HTH. cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  14. #8
  15. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1956
    I have uploaded this demo to my web site. As mentioned above, the demo should be viewed in a modern browser such as Moz/NS and IE to see the difference.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo