| Background image does not extend vertically to the bottom on Firefox
|
jessweb
msg:3820636 | 12:45 am on Jan 7, 2009 (gmt 0) |
Hello everyone, This is my first post after extend searching for a solution and trial/error attempts to fix this issue. I would really, really appreciate any feedback you an offer. Description of problem Summary:
- I have a container DIV, and two other DIVs within it (left and right).
- The right DIV contains all the content.
- The left DIV contains an image that needs to be repeated vertically and extended to the bottom depending on the content inside the right DIV.
- IE7 result = all good
- FF3 result = the image on the left DIV only extends to the screen size. Beyond that, it stops. Solution needed:
Is there a way to extend the background image to the end? This image is a pattern. Its size is 132x152. I've also added a border for those three DIVs just to see how they behave on the browsers. Thank you in advance for your time. Code
<html>
<head>
<title>Title</title>
<style type="text/css" media="screen">
html {
text-align: center;
height: 100%;
} body
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin-top: 15px;
text-align: center;
height: 100%;
} #container
{
margin: 0 auto;
padding: 0;
width: 700px;
height: 100%;
min-height: 100%;
border: 1px solid #333;
} #leftcol
{
float: left;
width: 134px;
background-image: url('image.gif');
background-position: left top;
background-repeat: repeat-y;
border: 1px solid #FF0000;
height: 100%;
/*overflow: hidden; */
} #rightcol {
float: right;
width: 535px;
border: 1px solid #003399;
} #footer
{
clear: both;
padding: 1em;
border-top: 1px solid #333;
height: 75px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcol">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
</p> </div>
<div id="rightcol">
<p>
Looong text here
</p> </div>
<div id="footer">
Footer stuff here
</div>
</div>
</body>
</html> |
|
Thank you, Jessica [edited by: swa66 at 3:03 am (utc) on Jan. 7, 2009]
[edit reason] made the long test in rightcol a bit shorter to improve readbility [/edit]
|
2lame2rank
msg:3820670 | 2:29 am on Jan 7, 2009 (gmt 0) |
Hello and Welcome :) Does your real HTML page have a DOCTYPE and if so what one are you using? The first problem I see is that when you have no full DOCTYPE then the browsers all are in Quirks Mode and this can mess things up.
|
swa66
msg:3820689 | 2:58 am on Jan 7, 2009 (gmt 0) |
Welcome to WebmasterWorld! [webmasterworld.com] height:100% means that the element gets the height of its direct parent provided the parent was given a height explicitly (and different from auto (auto is the default value)). The root element has a height of the viewport. So your code is instructing to do what FF does, it's IE that's putting you on the wrong foot (as is the case in 99% of the times when IE and FF render things differently). Which brings us to why use height:100% at all ? Did you want to have a minimal height ? If so use min-height, not height and fix it for IE with either height interpreted as min-height of an expression in a conditional comment. The trick to expand the parent to encompass the 2 floated children is to add an element after the floated elements that is not floated and has clear:both; (like your footer)
|
jessweb
msg:3821193 | 5:17 pm on Jan 7, 2009 (gmt 0) |
Hello and thank you both. :) 2lame2rank - Yes. The real page has this doctype. I added it to the code below too. :)
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
swa66 - I've removed the height and min-height. I've also added the non-floated element after the floated elements. So now the parent encompases the floated children. However, the left DIV still doesn't extend to the bottom. =( Current code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css" media="screen">
html {
text-align: center;
} body
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin-top: 15px;
text-align: center;
} #container
{
margin: 0 auto;
padding: 0;
width: 700px;
border: 1px solid #333;
} #leftcol
{
float: left;
width: 134px;
background-image: url('pattern.gif');
background-position: left top;
background-repeat: repeat-y;
border: 1px solid #FF0000;
height: 100%
} #rightcol {
float: right;
width: 535px;
border: 1px solid #003399;
} #spacer {
background-image: url('transparent.gif');
background-repeat: no-repeat;
width: 10px;
height: 1px;
clear: both;
border: 1px solid fuchsia;
} #footer
{
clear: both;
padding: 1em;
border-top: 1px solid #333;
height: 75px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcol">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
</p> </div> <div id="rightcol">
<p>
Looong text here
</p> </div> <div id="spacer"></div> <div id="footer">
Footer stuff here
</div> </div>
</body>
</html>
|
|
Thank you!
Jessica [edited by: swa66 at 9:11 pm (utc) on Jan. 7, 2009]
[edit reason] replace long text with placeholder to improve readability [/edit]
|
jessweb
msg:3821236 | 5:57 pm on Jan 7, 2009 (gmt 0) |
Update - Got it working. Here's how: I'm not sure if I can have the leftcol DIV to extend all the way to the bottom. But since we got the container DIV to encompass the floated children DIVs, I just moved the background image to the container DIV. Now it extends to the bottom. :) Final code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css" media="screen">
html {
text-align: center;
} body
{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin-top: 15px;
text-align: center;
} #container
{
margin: 0 auto;
padding: 0;
width: 700px;
background-image: url('pattern.gif');
background-position: left top;
background-repeat: repeat-y;
border: 1px solid #333;
} #leftcol
{
float: left;
width: 134px;
border: 1px solid #FF0000;
height: 100%
} #rightcol {
float: right;
width: 535px;
border: 1px solid #003399;
} #spacer {
background-image: url('transparent.gif');
background-repeat: no-repeat;
width: 10px;
height: 1px;
clear: both;
border: 1px solid fuchsia;
} #footer
{
clear: both;
padding: 1em;
border-top: 1px solid #333;
height: 75px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftcol">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod.
</p> </div> <div id="rightcol">
<p>
Looong text here
</p> </div> <div id="spacer"></div> <div id="footer">
Footer stuff here
</div> </div>
</body>
</html>
|
|
Thank you!
Jessica [edited by: swa66 at 9:12 pm (utc) on Jan. 7, 2009]
[edit reason] long text replacement [/edit]
|
swa66
msg:3821400 | 9:17 pm on Jan 7, 2009 (gmt 0) |
| I'm not sure if I can have the leftcol DIV to extend all the way to the bottom. But since we got the container DIV to encompass the floated children DIVs, I just moved the background image to the container DIV. Now it extends to the bottom. happy! |
|
Think you got it. Don't know an easy way to make an element itself extend to have the height of one of it's siblings. The tricks all rely on a parent, or use the direct parent as you did.
|
|
|
