Background Gradient

My crystal ball is in the shop. We'll have to do this the old fashioned way. Hope you don't mind.

The website is http://www.woodburndesigns.com and the CSS is as follows.

/* CSS Document */

/* basic elements */
body
{background: url(http://www.woodburndesigns.com/images/bg_gradient.jpg);
background-repeat: repeat-x;
background-position: bottom;
text-align: center;
margin: 0px;
padding: 0px;
height: 100%;}

h1
{font: 17px Georgia, serif;
color: #e19630;
margin: 0px 0px 10px 0px;}

.form
{font: 17px Georgia, serif;
color: #e19630;
margin: 0px 5px 0px 0px;}

h2
{font: 13px Georgia, serif;
color: #e19630;
margin-bottom: 5px;}

h3
{font: bold 10px Georgia, serif;
color: #646464;
margin-bottom: 3px;
margin-top: 13px;}

h4
{font: italic 13px Georgia, serif;
color: #646464;
margin-bottom: 8px;
margin-top: 0px;
margin-left: 10px;}

.p1
{font: 10px/15px verdana, sans-serif;
margin-top: 0px;
margin-bottom: 12px;}

.p2
{font: 9px/14px verdana, sans-serif;
color: #646464;
margin: 0px;
padding: 8px 0px 0px 10px;}

.p3
{margin: 0px;
padding: 5px 25px;}

.p4
{font: 10px/15px verdana, sans-serif;
color: #646464;
padding: 0px;
margin: 0px 10px 5px 10px;}

.roundtop
{background: url(http://www.woodburndesigns.com/images/tr.gif) no-repeat top right;}

.roundbottom
{background: url(http://www.woodburndesigns.com/images/br.gif) no-repeat bottom right;}

img.corner
{width: 15px;
height: 15px;
border: none;
display: block !important;}

table
{width: 100%;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px 0px 10px 0px;
padding: 0px;}

td
{font: 10px/15px verdana, sans-serif;
color: #646464;
padding-bottom: 5px;
padding-right: 5px;}

.formlabel
{width: 90px}

a:link
{color: #e19630;}

a:visited
{color: #646464;}

a:hover
{color: #e19630;}

textarea
{font: 10px/15px verdana, sans-serif;
width: 100%;}

cfinput, input, textarea, select, cfselect
{font: 10px/15px verdana, sans-serif;}


/* specific divs */
#main
{width: 750px;
padding: 0px;
margin: 0px auto 0px auto;
text-align: left;
background: white url(../images/nav_background.jpg) repeat-y;}

#header
{margin: 0px;
padding: 0px;
width: 750px;}

#sitenav
{font: 12px/18px verdana, sans-serif;
color: #646464;
background: #f1f1f1;
width: 179px;
padding: 0px 0px 20px 0px;
margin: 0px;
float: left;}

#sitenav ul
{margin: 0px;
padding: 0px 50px 0px 10px;}

#sitenav ul li
{border-bottom: 1px solid white;
padding: 10px 0px 10px 0px;
cursor: default;
list-style-type: none;}

#sitenav a:link
{color: #646464;
margin: 0px 0px 20px 0px;}

#sitenav a:link, #sitenav a:visited
{text-decoration: none;}

#sitenav a:visited
{color: #646464}

#sitenav a:hover
{color: #e19630}

#masthead
{margin: 0px;
padding: 0px;
float: left;}

#content
{margin: 20px 0px 10px 20px;
padding: 0px;
width: 375px;
height: auto;
color: #646464;
float: left;}

#sidebar
{margin-top: 20px;
margin-bottom: 10px;
padding-left: 20px;
width: 150px;
color: #646464;
border-left: 1px dashed #646464;
float: right;}

#sidebar ul
{margin: 0px;
padding: 0px;}

#sidebar ul li
{margin-bottom: 5px;
cursor: default;
font: 9px/13px verdana, san-serif;
list-style-type: none;}

#e-note
{background: #f1f1f1;
height: auto;
padding: 0px;
margin: 0px;}

#footer
{font: 9px verdana, sans-serif;
color: white;
background: #646464;
width: 100%;
height: auto;
text-align: right;
clear: both;}

#footer a:link
{color: white;
text-decoration: none;}

#footer a:visited
{color: white;
text-decoration: none;}

#footer a:hover
{color: #e19630;
text-decoration: underline;}

What happens when you get rid of the height: 100%; in body?

On the scrolling pages it fixes the problem then on the none scrolling pages its positioned wrong again. I just can't win!

I'm sorry I didn't see it earlier. I assumed that you read the rules and guidelines.

You've got no doctype. It's kind of a big issue around here.

Check out the stickies in the How to section and get your code validated (it took me about 1 minute 12 seconds to do it so it's not a lot of work or anything) and then we'll work on the problem.

After that, I've got the error sorted. Get back to me when you've finished that.

No Problem! Everything should be ok now. Sorry about that!

How about this:

/* CSS Document */


/* basic elements */
html {min-height:100%;}

body
{background: url(http://www.woodburndesigns.com/images/bg_gradient.jpg) repeat-x 0 bottom;
text-align: center;
margin: 0px;
padding: 0px;
}

Use the min-height instead of height and it should work for you.

I hope it does work. I've got to get to sleep.

*yawn* Let me know if it works.

Make sure you use the min-height in html. I made an edit while you were working on it.

Of course attaching the background to the top fixes it as well.

<lisa>stupid crystal ball's been in the shop forever</lisa>

<lisa>stupid crystal ball's been in the shop forever</lisa>

Boy, I'm sure glad I stayed up until past 3am to help. The thanks is just too much.

What a load! Pfft, I was even nice to him when he didn't read the rules. Last time for that.

<lisa>stupid crystal ball's been in the shop forever</lisa>

Boy, I'm sure glad I stayed up until past 3am to help. The thanks is just too much.

What a load! Pfft, I was even nice to him when he didn't read the rules. Last time for that.

Are you being serious with this?

If so thanks for your help. But you shouldn't get so butt hurt and definitely don't post it in the same discussion.

Semi-serious.

What usually happens in cases like this is someone asks a question here and at another forum. Then if they get the answer elsewhere we usually get forgotten. Whatever you do, don't do that to Hugo.

No problem, friend.

Eh?

Thanks for replying. Like you said when I posted that it was late at night. I followed all of your instructions and then it hit me that I could just move it to the top. By the time I figured it out I didn't think about saying thank you. But trust me I appreciate your time spent.

The problem is, a lot of us spend a lot of time coming up with code and examples and most of the time the OP either gets a solution somewhere else, or just takes what we've done and disappears

Thanks for coming back