CSS NS Div background problem:

Dev Shed Forums Sponsor:

September 23rd, 2003, 05:40 AM

DEfusion

Contributing User

Join Date: Jan 2003

Posts: 288

Time spent in forums: 9 h 26 m 45 sec
Reputation Power: 6

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

September 23rd, 2003, 08:42 AM

drgroove

pushing envelopes, not pencils

Dev Shed God 2nd Plane (6000 - 6499 posts)

Join Date: Feb 2002

Posts: 6,225

Time spent in forums: 1 Day 4 h 44 m 44 sec
Reputation Power: 174

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.

__________________
Give a person code, and they'll hack for a day; Teach them how to code, and they'll hack forever.
Analyze twice; hack once.
The world's first existential ITIL question: If a change is released into production without a ticket to track it,
was it actually released?

About DrGroove: ITIL-Certified IT Process Engineer - Enterprise Application Architect -
Freelance IT Journalist - Devshed Moderator - Funk Bassist Extraordinaire

September 23rd, 2003, 08:53 AM

DEfusion

Contributing User

Join Date: Jan 2003

Posts: 288

Time spent in forums: 9 h 26 m 45 sec
Reputation Power: 6

Its occuring in NS 7.1, it's not online at the moment I'm afraid.

September 23rd, 2003, 10:39 AM

DEfusion

Contributing User

Join Date: Jan 2003

Posts: 288

Time spent in forums: 9 h 26 m 45 sec
Reputation Power: 6

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

April 2nd, 2004, 12:17 AM

sweet-akari

Registered User

Join Date: Apr 2004

Posts: 1

Time spent in forums: < 1 sec
Reputation Power: 0

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:
URL

and the page is here:
URL

(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 12:26 AM. Reason: Forgot something...

April 2nd, 2004, 02:27 AM

DEfusion

Contributing User

Join Date: Jan 2003

Posts: 288

Time spent in forums: 9 h 26 m 45 sec
Reputation Power: 6

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

April 2nd, 2004, 05:37 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,554

Time spent in forums: 1 Month 2 Days 7 h 26 m 23 sec
Reputation Power: 607

Quote:

Originally Posted by DEfusion

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.

Ask a better question, get a better answer.

April 3rd, 2004, 02:20 PM

kk5st

Thanks Johnny Hart (BC) R.I.P.

Join Date: May 2003

Location: Dallas

Posts: 4,554

Time spent in forums: 1 Month 2 Days 7 h 26 m 23 sec
Reputation Power: 607

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

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: