Background not completely showing in FireFox

**stoemp** · Nov 18, 2004, 03:47

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:

HTML Code:

<div style="margin-left: auto; margin-right: auto; width: 780px; height: 100%; border-right: solid 1px black; border-left: solid 1px black; background-image: url(../maps/back.gif);">

.

Can someone help me with this issue?

Thanks

Steven

**AutisticCuckoo** · Nov 18, 2004, 04:20

height:100%

Of what? How is the containing block's height declared?

**stoemp** · Nov 18, 2004, 05:57

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?

Thanks

**AutisticCuckoo** · Nov 18, 2004, 08:27

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.

**ent|ty** · Nov 18, 2004, 21:00

Originally Posted by stoemp

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:

HTML Code:

<div style="margin-left: auto; margin-right: auto; width: 780px; height: 100%; border-right: solid 1px black; border-left: solid 1px black; background-image: url(../maps/back.gif);">

.

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.

Experiment more, you'll get it. Hope this helped.

**stoemp** · Nov 22, 2004, 00:37

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?

Thanks

Steven

**ent|ty** · Nov 22, 2004, 09:51

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;

Code:

<div id="container" style="margin-left: auto; margin-right: auto; width: 780px;border-right: solid 1px black; border-left: solid 1px black;">

<table id = "new" cellspacing='0' cellspacing='0' width='100%'>
<tr>
<td id="contentBlock" style="background-image: url(../maps/back.gif);">

<!-- Insert your current content here  -->

</td>
</tr>
</table>
</div>

The <div> will act as a container for all, but the <td> will ensure (at least with your current design), that back.gif will repeat itself behind the content.

The battle between using tables and divs(block elements) rages on. I personally like using <divs> to position content, and only use tables for formatting tabular information.

Try it and see if it works.

**stoemp** · Nov 29, 2004, 08:47

ent|ty: Very nice work! The problem is solved with your tips. Another piece of the CSS puzzle has been solved.

Thanks

Steven

The SitePoint Forums have moved.

User Tag List

Thread: Background not completely showing in FireFox

Thread Tools

Display

Background not completely showing in FireFox

Bookmarks

Bookmarks

Posting Permissions