SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    there is no box baztorres's Avatar
    Join Date
    May 2004
    Location
    UK - London \ Surrey
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div going down the page and not staying in it's parent container

    Hello all,

    I'm doing a little site for myself which is just a single box that is (horizontally) centered in the middle of the page (using the CSS from little boxes: http://www.thenoodleincident.com/tut..._centered.html).

    I have a couple of sections, so to speak, of content in the page; actuall content and a contact footer like thing.
    These are contained in div's that are then contined in the main box.
    The contact div is kicking all the way down the page in FF, but looks ok in IE. I've added no positioning to these div's, can some one explain why this is happening?

    Any help is really appreciated.

    Here's the code:

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>www.SebastienTorres.co.uk :: Home</title>
    <link href="_assets/style.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    
    <body>
    
    	<div id="box">
    	<h1>RESIDENTIAL COMPUTER SUPPORT</h1>
    	
    	<h2>Sébastien Torres</h2>
    	
    	<div id="content">
    	<ul>
    	<li>Advice</li>
    	<li>Basic Webdesign</li>
    	<li>Installations; Hardware & Software</li>
    	<li>Networking; Wired & Wireless</li>
    	<li>Troubleshooting; Hardware & Software</li>
    	</ul>
    	</div>
    	
    	<div id="contact">
    	<ul class="contact">
    	<li>07 966 167 696</li>
    	<li>07 812 175 169</li>
    	<li>support@sebastientorres.co.uk</li>
    	<li>http://www.sebastientorres.co.uk</li>
    	</ul>
    	</div>
    	
    	</div>
    
    </body>
    </html>
    CSS:
    Code:
    body {
    	margin: 0px 0px 0px 0px;
    	padding: 0px 0px 0px 0px;
    	font-family: "Times New Roman", Times, serif;
    	color: #ccccff;
    	background-color: #ccccff;
    	text-align: center;
    /* part 1 of 2 centering hack */
    	}
    a {
    	text-decoration: none;
    	font-weight: bold;
    	color:  #ccc;
    	outline: none;
    	}
    a:visited {
    	color:  #ccc;
    	}
    a:active {
    	color:  #ccc;
    	}
    a:hover {
    	color: #ccc;
    	text-decoration: underline;
    	}
    .ahem {
    	display: none;
    	}
    strong, b {
    	font-weight: bold;
    	}
    p {
    	font-size: 12px;
    	line-height: 22px;
    	margin-top: 20px;
    	margin-bottom: 10px; 
    	}
    
    /* weird ie5win bug: all line-height to font-size ratios must agree or box gets pushed around. UPDATE: this has turned out to be very rare. my current recommendation is IGNORE this warning. at the moment i'm leaving it in only in case the issue turns up again. possibly the original bug in march 2001 was caused by an unusual combination of factors, although this solved it at the time.*/
    
    h1 {
    	font-size: 30px;
    	line-height: 44px;
    	font-weight: bold;
    	margin-top: 0;
    	margin-bottom: 0;
    	text-align: center;
    	}
    h2 {
    	font-size: 24px;
    	line-height: 40px;
    	margin-top: 0;
    	margin-bottom: 0;
    	text-align:center;
    	}
    h3 {
    	font-size: 16px;
    	line-height: 22px;
    	font-weight: bold;
    	margin-top: 0;
    	margin-bottom: 0;
    	}
    h4 {
    	font-size: 14px;
    	line-height: 26px;
    	font-weight: bold;
    	margin-top: 0;
    	margin-bottom: 0;
    	}
    h5 {
    	font-size: 12px;
    	line-height: 22px;
    	font-weight: bold;
    	margin-top: 0;
    	margin-bottom: 0;
    	}
    h6 {
    	font-size: 10px;
    	line-height: 18px;
    	font-weight: bold;
    	margin-top: 0;
    	margin-bottom: 0;
    	}
    	
    hr {
    	width:75%;
    	text-align:left;
    }
    
    ul {
    	list-style-type: none;
    
    }
    
    img {
    	border: 0;
    	}
    .nowrap {
    	white-space: nowrap;
    	font-size: 10px;
    	font-weight: bold;
    	margin-top: 0;
    	margin-bottom: 0;
    /* must be combined with nobr in html for ie5win */
    	}
    .tiny {
    	font-size: 9px;
    	line-height: 16px;
    	margin-top: 15px;
    	margin-bottom: 5px; 
    	}
    
    .contact	 {
    	font-size: small;
    }
    
    #contact {
    	position: relative;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-bottom-style: solid;
    	border-left-style: solid;
    	border-top-color: #000000;
    	border-right-color: #000000;
    	border-bottom-color: #000000;
    	border-left-color: #000000;
    }
    
    #content {
    	position: relative;
    
    }
    
    #box {
    	padding: 10px;
    	margin-top: 20px;
    	margin-bottom: 20px;
    	margin-right: auto;
    	margin-left: auto;
    	border: 5px solid #ccc;
    	text-align:left; /* part 2 of 2 centering hack */
    	width: 600px; /* ie5win fudge begins */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 600px;
    	height:400px;
    	background-color: #666699;
    	background-repeat: no-repeat;
    	background-image: url(contentBgImg-PNG.png);
    	background-position: bottom right;
    	}
    
    html>body #content {
    	width: 600px; /* ie5win fudge ends */
    	height:400px;
    	}
    pre {
    	font-size: 12px;
    	line-height: 22px;
    	margin-top: 20px;
    	margin-bottom: 10px; 
    	}/* CSS Document */
    Baz
    ---

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Its because you are giving a height of 400px to #content which pushes the footer all the way down the page. Ie6 and under isn't affected because you used the child selector which they don't understand.

    Code:
    html>body #content  {
    	width: 600px; /* ie5win fudge ends */
        height:400px;
    	}
    I think you meant to apply that style to #box anyway:
    Code:
    html>body #box {
    	width: 600px; /* ie5win fudge ends */
    	height:400px;
    	}

    You have the ie5.+ hack wrong anyway and the code can simply be reduced to this.

    Change this:
    Code:
    #box {
    	padding: 10px;
    	margin-top: 20px;
    	margin-bottom: 20px;
    	margin-right: auto;
    	margin-left: auto;
    	border: 5px solid #ccc;
    	text-align:left; /* part 2 of 2 centering hack */
    	width: 600px; /* ie5win fudge begins */
    	voice-family: "\"}\"";
    	voice-family:inherit;
    	width: 600px;
    	height:400px;
    	background-color: #666699;
    	background-repeat: no-repeat;
    	background-image: url(contentBgImg-PNG.png);
    	background-position: bottom right;
    	}
    
    html>body #content {
    	width: 600px; /* ie5win fudge ends */
    	height:400px;
    	background:red
    	}

    To this:
    Code:
    #box {
    	padding: 10px;
    	margin: 20px auto;
    	border: 5px solid #ccc;
    	text-align:left; 
    	width: 600px;
    	height:400px;
    	background:#666699 url(contentBgImg-PNG.png) no-repeat right bottom;
    }
    * html #box {
    	width: 630px;
    	height:430px;
    	w\idth: 600px;
    	he\ight:400px;
    }

  3. #3
    there is no box baztorres's Avatar
    Join Date
    May 2004
    Location
    UK - London \ Surrey
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I did mean to apply that to #box.
    Thanks very much for your help Paul, much appreciated.
    Baz
    ---


Bookmarks

Posting Permissions

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