SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
-
Nov 18, 2004, 04:47 #1
- Join Date
- Nov 2004
- Location
- Roeselare
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
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
-
Nov 18, 2004, 05:20 #2
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
height:100%
Of what? How is the containing block's height declared?Birnam wood is come to Dunsinane
-
Nov 18, 2004, 06:57 #3
- Join Date
- Nov 2004
- Location
- Roeselare
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Nov 18, 2004, 09:27 #4
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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%}
Check Paul's thread about 3-column layouts at the top of the CSS forum list for some ideas.Birnam wood is come to Dunsinane
-
Nov 18, 2004, 22:00 #5
- Join Date
- Jun 2004
- Posts
- 62
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by stoemp
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.
-
Nov 22, 2004, 01:37 #6
- Join Date
- Nov 2004
- Location
- Roeselare
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Nov 22, 2004, 10:51 #7
- Join Date
- Jun 2004
- Posts
- 62
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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 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.Last edited by ent|ty; Nov 22, 2004 at 10:52. Reason: For clarity
-
Nov 29, 2004, 09:47 #8
- Join Date
- Nov 2004
- Location
- Roeselare
- Posts
- 4
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
ent|ty: Very nice work! The problem is solved with your tips. Another piece of the CSS puzzle has been solved.
Thanks
Steven
Bookmarks