Jump to content

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


ShootingBlanks

Recommended Posts

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> </p>
	</div>
        <div id="navBar">
        	<p> </p>
	</div>
        <div id="mainRight">
        	<img src="images/mainPic.jpg" />
	</div>
        <div class="spacer"> </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!

UPDATE:

Okay - I actually just figured this out.  But now there's a new problem.  I fixed the above problem by changing this part:

#container {
background: #000;
height: 100%;
width: 780px;
margin:auto;
padding: 0;
text-align: justify;
}
* html #container {
height: 100%;
}

 

However, now only in Firefox there appears to be an approximately 10-20px gap (margin-top?) on the top of the page (above the #container).  Any thoughts on this one???...

 

 

 

maybe try loosing line-height in your body add it somewhere else that maybe it

 

i alsways start my css docs with something like this

 

* { padding: 0; margin: 0; }

body {
background: #000;
}

#container{ 
margin: 0;
width: 960px; 
background: #000;
border: 0px solid #fcce31;
}

 

I never have any spaces at the top hope it helps

maybe try loosing line-height in your body add it somewhere else that maybe it

 

i alsways start my css docs with something like this

 

* { padding: 0; margin: 0; }

 

 

This is not a good idea as it takes longer to parse through every element.  I personally don't think it is necessary to use any resets, but if you do you should use one that is more specific.

This is not a good idea as it takes longer to parse through every element.  I personally don't think it is necessary to use any resets, but if you do you should use one that is more specific.

 

Why is that? Some of us likely need to define custom margins/paddings anyway, and as such its a perfect method to get the job done.

For one it can have undesirable effects.  Form elements are picky and there are some things that you are better off not messing with.

 

http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

 

I've also read that it can be slower but I can't really confirm it.

I have to disagree with Eric Meyer on this one - Listing all the elements to "reset them" is a waste of bandwidth and processing power.

 

I developed thefilmGOD's reseting technique:

 

* {

margin, padding: 0;

}

 

I haven't experienced any problems with it yet.  ;)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.