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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts

    Can't get my border to stretch down the page - HELP!

    I can only get my page to display correctly in IE6. Not IE7 or Firefox. If anyone could help, it'd be much appreciated!

    Basically, the borders on the left/right don't stretch all the way down the page in IE7 and Firefox (like they do in IE6).

    Here is the website:

    http://www.stacyandmatt.com/

    Here's the simple HTML:

    Code:
    <body>
    <div id="container">
    	<div id="maincontent">
        	<div id="header">
    	  		<p>&nbsp;</p>
    		</div>
            <div id="navBar">
            	<p>&nbsp;</p>
    		</div>
            <div id="mainRight">
            	<img src="images/mainPic.jpg" />
    		</div>
            <div class="spacer">&nbsp;</div>
        </div>
    </div>
    </body>
    And here is the CSS:

    Code:
    html, body {
    	background: #000;
    	font-family: Arial, Helvetica, sans-serif;
    	padding: 0;
    	margin: 0;
    	color: #F09;
    	height: 100%;
    	line-height: 1.5em;
    }
    
    #container {
    	background: #000;
    	height: 100%;
    	width: 780px;
    	margin:auto;
    	padding: 0;
    	text-align: justify;
    }
    
    #maincontent {
    	background: #000 url(../images/borderTest.jpg) repeat-y top left;
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    	width: 100%;
    	border-right: 6px solid #F09;
    	overflow: visible;
    }
    
    #header {
    	background: url(../images/header.gif) no-repeat top left;
    	width: 100%;
    	height: 141px;
    	margin: 0px;
    	padding: 0px;
    }
    
    #navBar {
    	width: 155px;
    	float: left;
    	padding: 20px 0px 0px 40px;
    	margin: 0px;
    	color: #000000;
    }
    
    #mainRight {
    	width: 555px;
    	float: right;
    	padding: 20px 5px 0px 5px;
    	margin: 0px;
    }
    
    .spacer {
    	clear: both;
    }
    Thanks!

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    since your using frames I guess you mind a hack too

    Code:
    #container {
    	background: #000;
    	min-height: 100%;
    	width: 780px;
    	margin:auto;
    	padding: 0;
    	text-align: justify;
    }
    * html #container {
            height: 100%;
    }
    give that a go. min-height for good browsers and height (IE6 thinks it's min-height too) for the rest ie. IE6.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Thanks! - that worked!!!

    Can you explain what that did for me so that I can learn what I was doing? Thanks!!!

    One other thing...You'll notice that only on Firefox there's probably a 10-20px gap at the top of the page (as though there's a margin-top style added to the main container). But only in Firefox. Any thoughts on that one?...
    Last edited by ShootingBlanks; 02-19-2009 at 02:51 AM.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    no sweat.

    Code:
    first the space at the top. in your header you have:
    <div id="header">
    	  		<p> </p>
    		</div>
    remove that empty paragraph. It appears it's the defualt margins causing the space.

    As for the min-height deal.

    IE7, FF, Opera and Safari know what min-height is. IE6 and below have no clue. instead they treat height as min-height. the
    Code:
    * html
    is for IE less than 7. so for modern browsers, min-heigth 100% is the same thing IE sees height: 100% being.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Okay - I know I said that your solution worked, but I was mistaken. I'm not sure what I was seeing, but I viewed the site from a higher-resolution browser (so, more screen area), and the page definitely does not stretch all the way down. It's still getting "stopped" at however long the content it (assuming the content length is shorter than the page length). But I did make that update you suggested in your original reply...

    Any other ideas???

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello shootingblanks,
    When you make a full height layout like this, the outer container is the only full height div. You have your background image on #maincontent but that div is only as high as it's content.
    Move your image to the full height div like this:
    Code:
    #container {
    	background: #000;
    	min-height: 100%;
    	width: 780px;
    	margin:auto;
    	padding: 0;
    	background: #000 url(.../images/border.jpg) repeat-y top left;
    }
    * html #container {
    	height: 100%;
    }
    
    #maincontent {
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    	width: 100%;
    	border-right: 6px solid #F09;
    	overflow: visible;
    }
    You'll need to do the same with your 6px border on the other side.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ShootingBlanks (02-26-2009)

  • #7
    Regular Coder
    Join Date
    Sep 2007
    Posts
    125
    Thanks
    30
    Thanked 0 Times in 0 Posts
    Okay - I can't tell just yet if that worked because I'm at work on the computer with the lower-resolution monitor. But it looks the same on that monitor (good sign). I posted the new changes live online, so I'll check it when I get home. Or, if you have a high-resolution monitor, feel free to let me know the results!

    Either way, thanks for the help!

    UPDATE: I just checked it when I got home, and it works now!!! Thanks so much for the help. More importantly, getting this done will make the wife happy, so that gets me out of hot water! Heheh...
    Last edited by ShootingBlanks; 02-26-2009 at 03:22 AM.


  •  

    Posting Permissions

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