14 replies [Last post]
woodburndesigns
Offline
newbie
Silverdale, WA
Last seen: 13 years 37 weeks ago
Silverdale, WA
Joined: 2007-01-15
Posts: 6
Points: 0

Hi Everyone,

My name is Geoff Woodburn. I am the owner of Woodburn Designs in Silverdale, WA. I am currently redesigning my website. I am having a problem with my background gradient in Firefox 1.5. For some reason on the pages that you have to scroll down on the gradient doesn't line up with the bottom of the page. Instead it is lining up with the top of the footer.

Can anyone offer any suggestions on how to fix this problem? It's driving me crazy!

Triumph (not verified)
Anonymous's picture
Guru

My crystal ball is in the

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

woodburndesigns
Offline
newbie
Silverdale, WA
Last seen: 13 years 37 weeks ago
Silverdale, WA
Joined: 2007-01-15
Posts: 6
Points: 0

My Bad

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;}

Triumph (not verified)
Anonymous's picture
Guru

What happens when you get

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

woodburndesigns
Offline
newbie
Silverdale, WA
Last seen: 13 years 37 weeks ago
Silverdale, WA
Joined: 2007-01-15
Posts: 6
Points: 0

On the scrolling pages it

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

Triumph (not verified)
Anonymous's picture
Guru

woodburndesigns wrote:On the

woodburndesigns wrote:
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. Smile

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

woodburndesigns
Offline
newbie
Silverdale, WA
Last seen: 13 years 37 weeks ago
Silverdale, WA
Joined: 2007-01-15
Posts: 6
Points: 0

No Problem! Everything

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

Triumph (not verified)
Anonymous's picture
Guru

How about this:

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

*yawn* Let me know if it works.

Triumph (not verified)
Anonymous's picture
Guru

Make sure you use the

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Triumph wrote:My crystal

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

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

Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Triumph (not verified)
Anonymous's picture
Guru

thepineapplehead

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

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

Laughing out loud
Smile

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

woodburndesigns
Offline
newbie
Silverdale, WA
Last seen: 13 years 37 weeks ago
Silverdale, WA
Joined: 2007-01-15
Posts: 6
Points: 0

Triumph

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

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

Laughing out loud
Smile

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

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.

Triumph (not verified)
Anonymous's picture
Guru

woodburndesigns wrote:Are

woodburndesigns wrote:
Are you being serious with this?
Semi-serious. Smile

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. Laughing out loud

woodburndesigns wrote:
If so thanks for your help.
No problem, friend.

woodburndesigns wrote:
But you shouldn't get so butt hurt and definitely don't post it in the same discussion.
Eh?

woodburndesigns
Offline
newbie
Silverdale, WA
Last seen: 13 years 37 weeks ago
Silverdale, WA
Joined: 2007-01-15
Posts: 6
Points: 0

Thanks for replying. Like

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

The problem is, a lot of us

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 Laughing out loud

Thanks for coming back Smile

Verschwindende wrote:
  • CSS doesn't make pies