The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Background not completely showing in FireFox

Hi

I still use tables to design my site. I know I should use css for positioning, but when I started making the site, I didn't know CSS.

Well, here's my problem. When you go to http://www.biognost.be/food/ and check out the homepage, you will see that when you scroll, the background isn't complete. There's only background on the part that shows initially. How can I solve this? I use a div with a background to get this effect. Within the div I place the table with the content. The code for this is:

100% should normally be the available height. I heard that browsers like mozilla interpret the 100% as the full displayed height, so that it's normal that the background isn't there when you scroll. I can understand that, but I'm looking for a hack r something. Do you know what I can do?

100% is the full height of the containing block. It's not 100% of the document's height or anything like that. And the height of the containing block must in turn be explicitly specified for a child element's height declaration to work (in compliant browsers).

Besides, if you specify a height, compliant browsers will obey it. IE will treat it as min-height, which is incorrect but sometimes also exactly what you wish for.

To further complicate the problem, this won't work as intended:

Code:

body {min-height:100%}
div#container {height:100%}

Because there is no explicit height set for <body> (just a min-height), the 100% height of the container <div> has no effect.

Check Paul's thread about 3-column layouts at the top of the CSS forum list for some ideas.

Well, here's my problem. When you go to http://www.biognost.be/food/ and check out the homepage, you will see that when you scroll, the background isn't complete. There's only background on the part that shows initially. How can I solve this? I use a div with a background to get this effect. Within the div I place the table with the content. The code for this is:

This is just a case of inexperience with CSS. I'm sure you'll figure out all the quirks as you go along.

IE always "corrects" inappropriate HTML and CSS styles for you, while Firefox and other standards-compliant browsers will display your site as you define it, whether it is correct or not. This is actually a cool feature, cause then you can look at your own code than blame the browser. I love Firefox for that.

Ok, I think I had that problem myself in one of my projects. By defining the height of your element (in this case, the <div style="height: 100%") It sets the <div> to the height of the existing window when the site is opened. Therefore, when scrolling down, the content will appear to "fall out" of the <div> element. The <div> is doing what you told it to... be 100% of the display window's height.

You can test what I'm saying, by resizing your browser window to half of the height of your screen, refreshing the page, and scrolling down. It will be the exact height of your browser window.

If your remove the style="height: 100%" definition, it shouldn't do that anymore.

I usually set the body background first, then make it repeat-y, then make a header <div>, content <div> and footer<div>. The header and footer images simply cover the default body's background, making it appear as one graphic.

Tommy: I'm fully aware that my CSS may be not 100% perfect and professional, but I started working on the site when I didn't know about the existence of CSS. Now it's virtually impossible to change the complete site to full CSS design without tables. And that's exactly my problem.

ent|ty: I can't use the background setting as you told me to do because in fact I use 2 backgrounds. First there are the stripes you see on the left and right hand side of the content block. This is the background setting for the document. The falling blocks you see inside the content page are the background of the div. I can't make one background because the falling blocks need to be centered and the site cannot be stretched horizontally. It seems I'm stuck in my old way of designing here unless I re-create the website... Is there really no way of letting the background stretch over the full height of the div?

Use the <div> you have as a container (which sets the width as you already are doing), then enclose your content in it's own one-celled table and see what happens. The <TD> should expand down as far as it should go and the background should remain behind your existing content;