I have the following page that I'm working on: http://www.mediamogu...ine/index.html#
It looks right in Internet Explorer, but breaks in Firefox....
the problem in FF is that the content in my middle column is not pushing down the containing divs and revealing their backgrounds...Again, it looks correct in IE...you will see the issue
Can anyone help me out here? I appreciate it...
0
CSS - content not pushing down div background
Started by randallj2877, Feb 24 2006 12:31 PM
8 replies to this topic
#2
-
- Members
-
- 540 posts
Code Enforcer
- Location:Battle Creek, Michigan
- Interests:Web Development and Graphic Design
Posted 24 February 2006 - 01:21 PM
It has been my experience that NO browser supports CSS height 100% with a background image
Even with the browser "hacks" or "workarounds" that say just go
html,body{
height: 100%;
}
then put height 100% in all your divs doesnt work either because due to this fact.
Yes they may size the div, background-image, whatever to 100% of the browser window BUT with a slight oversight. Background-images (in my experience) stop at 100% of the browser window, if you have to scroll down the page (past the 100% mark) the background image stays where it was rendered by the browser at 100% the size of the browser window. and the content below that mark doesnt have said background image in any browser.
(This is of course using straight div layouts)
Sorry for my long ranty answer, but Im sorry height 100% (with a background image) isnt supported at the current moment
Im trying and racking my brain for a useable workaround, but at the moment its not looking promising.
Please if I am mistaken in my answer somebody PLEASE tell me. lol
It really would be of use.
edit: Nevermind all that ^^^ up there, I do believe Im close to creating a work-around since it is something I've been wondering myself. When I get it working I'll come back with the results, and a example that you can look at perhaps make work in your code as well.
EDIT 2: Solution
Ok so the solution I came up with was a hybrid since as I said 100% height with a background image is not quite supported just yet.
So the hybrid solution is to use just one table, and just one table cell to hold the background image and then the rest can be your CSS Div layout. Basically the table replaces the "wrapper" or "container" div found in most CSS sites.
Now on to the code and examples:
Note: I tested these two in IE, Firefox, Opera, Netscape and Flock and the background-image went true 100% in all of them.
Example 1 - Example 2
Hopefully you can see what I did there and apply that to your website. (tables replacing the background-holding-container/wrappers)
If you have any questions feel free to ask. Good Luck
Even with the browser "hacks" or "workarounds" that say just go
html,body{
height: 100%;
}
then put height 100% in all your divs doesnt work either because due to this fact.
Yes they may size the div, background-image, whatever to 100% of the browser window BUT with a slight oversight. Background-images (in my experience) stop at 100% of the browser window, if you have to scroll down the page (past the 100% mark) the background image stays where it was rendered by the browser at 100% the size of the browser window. and the content below that mark doesnt have said background image in any browser.
(This is of course using straight div layouts)
Sorry for my long ranty answer, but Im sorry height 100% (with a background image) isnt supported at the current moment
Im trying and racking my brain for a useable workaround, but at the moment its not looking promising.
Please if I am mistaken in my answer somebody PLEASE tell me. lol
It really would be of use.edit: Nevermind all that ^^^ up there, I do believe Im close to creating a work-around since it is something I've been wondering myself. When I get it working I'll come back with the results, and a example that you can look at perhaps make work in your code as well.
EDIT 2: Solution
Ok so the solution I came up with was a hybrid since as I said 100% height with a background image is not quite supported just yet.
So the hybrid solution is to use just one table, and just one table cell to hold the background image and then the rest can be your CSS Div layout. Basically the table replaces the "wrapper" or "container" div found in most CSS sites.
Now on to the code and examples:
Note: I tested these two in IE, Firefox, Opera, Netscape and Flock and the background-image went true 100% in all of them.
Example 1 - Example 2
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<!--
CSS BACKGROUND IMAGE WORKAROUND
100% Height Background Image Solution
Written By: Raenef @ P2L > http://www.pixel2life.com/forums/
Date: Febuary 2006
Notes: Take it, run with it, modify it, use it.
-->
<title>Layout Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
html,body{
height: 100%;
}
body{
margin: 0px;
padding: 0px;
text-align: center;
}
table{
height: 100%;
width: 740px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
background-image: url(background.png) !important;
background-repeat: repeat-y;
}
td{
height: auto;
width: 100%;
margin: 0px;
padding-top: 0px;
padding-right: 25px; /*from the dropshadow bg*/
padding-bottom: 0px;
padding-left: 25px; /*from the dropshadow bg*/
}
#content{
margin: 0px;
padding: 0px;
text-align: justify;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0"><tr><td valign="top">
<!--
Basically treat the table/td tags like they are the
"container" or "wrapper" div that usually goes at the beginning.
OTHER LAYOUT DIV's AND SUCH CAN GO IN HERE JUST LIKE USUAL.
-->
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis volutpat, augue nec mattis varius, nulla sem feugiat erat, sed placerat nisi metus et massa. Vestibulum ullamcorper, dui vel malesuada vestibulum, enim lacus pulvinar quam, eget rutrum orci enim quis metus. Nulla facilisi. Aliquam quis nisl. Nam ultricies pede. Maecenas aliquet lacus pellentesque tellus. In sit amet ante eget nulla lacinia fringilla. Etiam imperdiet mi sed nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus arcu. Duis nisi elit, rutrum ac, lacinia et, porttitor a, dui. Nullam aliquam bibendum mauris. Suspendisse felis. Donec varius ipsum ut orci. Sed tempor felis eget ante. Pellentesque fringilla ullamcorper pede.
</div>
</td></tr></table>
</body>
</html>
Hopefully you can see what I did there and apply that to your website. (tables replacing the background-holding-container/wrappers)
If you have any questions feel free to ask. Good Luck
Edited by raenef, 24 February 2006 - 02:39 PM.
#3
-
- P2L Staff
-
- 3,827 posts
PHP Master PD
- Gender:Male
- Location:Here
- Interests:Web Development
Posted 24 February 2006 - 05:53 PM
Not sure exactly what raenef did (simply because i don't feel like reading all of that ), but you could always try Faux Columns.
), but you could always try Faux Columns.
Edited by rc69, 24 February 2006 - 05:55 PM.
#4
-
- Members
-
- 540 posts
Code Enforcer
- Location:Battle Creek, Michigan
- Interests:Web Development and Graphic Design
Posted 24 February 2006 - 06:33 PM
omg.... 
lol I totally forgot about Faux Columns!
*dies from all the hard-work for nothing*
But yea that method could work too ^^
lol I totally forgot about Faux Columns! *dies from all the hard-work for nothing*
But yea that method could work too ^^
Edited by raenef, 24 February 2006 - 06:35 PM.
#5
-
- Members
-
- 1,346 posts
* Hooty Tooty Fruit *
- Gender:Male
- Location:Canada
- Interests:Making Websites, Working in 3D, Playing the Drums
Posted 24 February 2006 - 07:10 PM
the background is the whole pages background right? if it is use this:
this may also fix it if you are using a div.
Hoot
Quote
background: url(YOUR IMAGE) repeat-y;
this may also fix it if you are using a div.
Hoot
#6
-
- Members
-
- 118 posts
Young Padawan
- Location:United Kingdom
Posted 24 February 2006 - 08:59 PM
Ahh I have encountered this problem many times. Just add:
clear:both;
in your stylesheet to whatever you want to push push down.
clear:both;
in your stylesheet to whatever you want to push push down.
#7
-
- Members
-
- 499 posts
Jedi In Training
- Location:New York City
- Interests:Fine art, web and graphic design, naval architecture, chess, and sports.
Posted 24 February 2006 - 11:19 PM
Sorry, Stephen, but that's not going to solve his problem.
The easiest solution is (as suggested) to make the image the background for the entire page. There is no need for lengthy coding, hacks or complicated work-arounds. Simply make it the page's background; end of story.
The easiest solution is (as suggested) to make the image the background for the entire page. There is no need for lengthy coding, hacks or complicated work-arounds. Simply make it the page's background; end of story.
#8
-
- Members
-
- 13 posts
Young Padawan
Posted 25 February 2006 - 04:23 AM
First of all, thanks to everyone for taking the time to respond....
It seems that Faux Columns was the easiest and most efficient solution, so I employed that: http://www.mediamogu...tine/index.html
I think I've actually read that article before, too, but I must have forgotten...
Anyway, thanks again for your help guys!
It seems that Faux Columns was the easiest and most efficient solution, so I employed that: http://www.mediamogu...tine/index.html
I think I've actually read that article before, too, but I must have forgotten...
Anyway, thanks again for your help guys!
#9
-
- Members
-
- 499 posts
Jedi In Training
- Location:New York City
- Interests:Fine art, web and graphic design, naval architecture, chess, and sports.
Posted 25 February 2006 - 11:09 AM
Just so you know, there's a small kink in the border image at the bottom of the content. I'm guessing this is because although you made the image a page background, you still left it as the div background and there are some dimension issues.
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
