...

View Full Version : Can't get my border to stretch down the page - HELP!



ShootingBlanks
02-19-2009, 12:22 AM
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:


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


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!

harbingerOTV
02-19-2009, 12:35 AM
since your using frames I guess you mind a hack too ;)


#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.

ShootingBlanks
02-19-2009, 02:49 AM
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?...

harbingerOTV
02-21-2009, 06:30 PM
no sweat.


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
* html is for IE less than 7. so for modern browsers, min-heigth 100% is the same thing IE sees height: 100% being.

ShootingBlanks
02-25-2009, 05:20 PM
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???

Excavator
02-25-2009, 05:40 PM
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:


#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.

ShootingBlanks
02-25-2009, 06:25 PM
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! :thumbsup:

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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum